Search code examples
csssasscompass

Why compass includes *vertical-align in the output?

I am fairly new to web development so kindly forgive me if it is noob question. I started using compass framework and I noticed that the output contains the following css

SASS

#inline-block {
   @include inline-block;
}

CSS

  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;

I am not sure what this * prefixed css is meant for or what does it do in modern browsers. Chrome, FF and IE edge simply ignores it.

Can someone explain me what it does and how can I stop compass from including non-compliant css in the output.

PS: I looked for it in http://peter.sh/experiments/vendor-prefixed-css-property-overview/ and other similar sites but there is no mention of it. Google let me down, it too simply ignores the prefix

Solution

  • It helps to display the site on different version of Internet explorer.

    *vertical-align: auto; /*Only works on IE7 and below*/

    Also keep in mind:

    _vertical-align: auto; /*Only works on IE6 and below*/

    You can check this site to learn more: http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer