CSS Hack

!important

作用:用来解决一些在IE6上显示的效果与IE7/IE8/IE9/FireFox上的效果不一样的情况。比如有下面的一段代码:

#content{
      height:960px !important;
      height:900px;
}

        IE7/IE8/IE9/FireFox可以识别上面附加“!important”的语句,看到附加“!important”的语句后,就不会再去执行第二句,尽管他们也“认识”第二句,但是附加“!important”的语句拥有绝对优先级,只要有它存在,第二句就不允许执行。附加“!important”语句IE6也可以识别,虽然可以识别但是会无视!important,就好比对面过来了一个朋友,你认识,他从你身边走过,你却没有理会对方,这就是认识但是无视了对方,IE6对!important的态度就是这样,所以IE6会执行“!important”的语句后,再去执行第二句“height:900px”,用后面的样式覆盖了前面的样式,所以在IE6下,最终的height值是900px。

        利用浏览器对加了“!important”语句的识别能力(尽管!important被IE6~IE9,FF,Chrome所识别),来解决一些在IE6上显示的效果与IE7/IE8/IE9/FireFox上的效果不一样的情况。

*(星号)

作用:用来解决一些在IE6/IE7上显示的效果与IE8/IE9/FireFox上的效果不一样的情况。比如有下面的一段代码:

#content{
      height:960px;
     *height:900px;
}

        IE8/IE9/FireFox不能识别附加有*的CSS属性语句,所以IE8/IE9/FireFox只能读第一句“height:960px;”而忽略第二句,IE6/IE7可以识别附加有*的CSS属性语句,也就是说第一句和第二句都认识,所以它们先读第一句,将高度定为960px,而后又读第二句“*height:900px;”,将高度从960px修改为900px,所以我们在IE中看到的最终效果就是高度为900px;

        利用浏览器对加了“*”语句的识别能力,来解决一些在IE6/IE7上显示的效果与IE8/IE9/FireFox上的效果不一样的情况。

原文地址:https://www.cnblogs.com/NatChen/p/6214950.html