What does *display mean in CSS?

Question

Possible Duplicate:
What does a star-preceded property mean in CSS?

I came across this while browsing for cross-browser support for display: inline-block...

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

What does *display do?

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

I doubt -moz-inline-box is necessary, Gecko supports inline-block now. zoom: 1 is also likely unnecessary, as display: inline-block; accomplishes the same task. For IE6 just having an ordinary *-less display: inline; last will take precedence, and for other IE's you can probably have it in another rule afterwards still without the * and it will work the same. (Basically, this blog post always had silly code, and it's only more silly at this time than it was.) — reisio, Apr 13 '11 at 19:48

score 8 · Accepted Answer · answered Apr 13 '11 at 19:33

*property: value;

This is a hack, so I don't recommend that you use it. Styles represented like this are interpreted only by IE 7 and below, so other browsers ignore those styles completely.

It's non-standard (or valid) CSS, but it's sometimes used to beat IE into submission.

clairesuzy · Answer 2 · 2011-04-13T20:20:36.527

as other have said this is a hack for IE7 and below

BUT this one, the example you've given is a specific hack so unlike a comment you've received I wouldn't recommend removing it yet.. you can move it or remove it after you read this and don't need it ;)

btw I agree -moz-inline-box is probably no longer necessary, it was for older versions of Firefox

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

Is a specific hack to get IE6/7 to display a block level element as an inline-block. Although IE has supported inline-block since v5.5 it didn't do so natively on block-level elements

So in this case what you need to do is give the element "layout" (zoom: 1;) and feed it display: inline after that.

Now display:inline-block also gives an element layout so if you remove the display-inline rule to a separate ruleset (either in a conditional or a hacked rule) you no longer have to use zoom: 1;

My preferred hack for this (for demonstration purposes) & because inline-blocks are so dashed useful, & because it's shorter is

selector {
  display: inline-block;
}


selector {
  display: inline !ie7;
}

that !ie7 is doing the same as the * before the display property, it's feeding that rule to IE7 and below - you could use the * version in the second rule too, however the !ie7 makes it clear, to me anyway it's a hack, and who it's for.

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 ruleset and get it's hasLayout triggered to true by the inline-block in there, you don't need zoom

the quoted hack you mention is popular because it keeps all the parts in the one ruleset, but zoom:1 is needed in that case as inline-block won't work to set hasLayout if it's in the same ruleset as the other display property

score 0 · Answer 3 · answered Apr 13 '11 at 19:32

The * in front is a hack for IE browsers, specifically versions and 7 and below. You may also see _display as well, where _ in front is a hack for IE versions 6 and below. CSS Rules with those will only apply to the those versions, and ignore by other browsers.

score 0 · Answer 4 · answered Apr 13 '11 at 19:32

0

It's a hack for IE 7. That property will be applied to IE 7 only.

I always refer to Comprehensive List of Browser-Specific CSS Hacks by Paul Irish

answered Apr 13 '11 at 19:32

Jaspero

2,912
6
26
30

score 0 · Answer 5 · answered Apr 13 '11 at 19:41

Complementing to the other questions:

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

So, for most browsers, *property, is not a valid property, and they'll just skip.

IE7, for reasons I don't know, recognizes *property as property, and them process it, while others won't.

What does *display mean in CSS?

5 Answers5