What does *display mean in CSS? [duplicate]

This question already has answers here: Closed 11 years ago.

Possible Duplicate:

What does a star-preceded property mean in CSS?

I came across this while browsing for cross-browser su开发者_Python百科pport 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/

---

*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.

---

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

---

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.

---

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

---

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.