What does display in CSS mean?

Question

Possible duplicate:
What does an asterisk-related property mean in CSS?

I came across this while watching cross-browser support to display: inline-block ...

selector { display: -moz-inline-box; display: inline-block; zoom: 1; *display: inline; } 

What does the display do?

Link from: http://www.aarongloege.com/blog/web-development/css/cross-browser-inline-block/

Answer 1

 *property: value; 

This is a hack, so I do not recommend using it . The styles presented in this way are interpreted only by IE 7 and lower, therefore other browsers completely ignore these styles.

This is non-standard (or valid) CSS, but it is sometimes used to outperform IE.

Answer 2

as others said, hack IE7 and below

BUT this, the example you quoted is a special hack, which, unlike the comment you received, I would not recommend deleting it. You can move it or delete it after you read it and do not need it;)

btw I agree -moz-inline-box, probably no longer needed, this was for older versions of Firefox

 selector { display: -moz-inline-box; display: inline-block; zoom: 1; *display: inline; } 

This is a specific hack so that IE6 / 7 displays the block level element as an inline block. Although IE supported inline-block , since v5.5 it didn’t do this initially on block level elements

So, in this case, you need to provide the "layout" element ( zoom: 1; ) and pass it display: inline after that.

Now display:inline-block also gives the layout of the element, so if you delete the display-inline rule on a separate set of rules (either in a conditional or in a hacker rule), you no longer need to use zoom: 1;

My preferred hack for this (for demo purposes) and because the built-in blocks are so dotted, but because it is shorter

 selector { display: inline-block; } selector { display: inline !ie7; } 

that !ie7 does the same as * before the display property, it feeds this rule in IE7 and lower - you can use the version * in the second rule too, however it does ie ie7 clearly, I don’t care about the hack, and who it is behind.

If you have a specific, conditional style sheet for IE7 and below, you can simply put the second rule in it - without any * or ie7 ;)

 selector { display: inline; } 

because IE will still read the first set of rules and make it hasLayout run true inline-block there, you don't need zoom

the hack you quoted is popular because it stores all parts in one set of rules, but zoom:1 is required in this case, since inline-block will not work to set hasLayout if it is in the same set of rules as another display property

Answer 3

* Ahead is a hack for IE browsers, in particular versions 7 and below. You can also see _display , where _ in front is a hack for versions of IE 6 and below. CSS rules with them will only apply to these versions and are ignored by other browsers.

Answer 4

This is a hack for IE 7. This property will only apply to IE 7.

I always refer to Paul Irish 's Complete List of Browsers with CSS Browsers

Answer 5

In addition to other issues:

The CSS specification says that any property not recognized should be discarded. This is due to future compatibility.

So, for most browsers, *property not a valid property, and they will simply skip.

IE7, for reasons I don’t know, recognizes *property as property , and they handle it, while others will not.