CSS Hack

      说到浏览器兼容性问题，就必须说CSS Hack！

 

      在CSS中，Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法。说的更直白一些就是，你平时做个页面，布局正确，CSS正确，可就是在不同的浏览器中显示的效果不一样，要么错位，要么多几个像素，怎么都找不到原因，这时候我们就会用一些技巧方法来让不同的浏览器显示一样的效果，这种方法我们就称之为CSS Hack。

     CSS Hack是通过不同的标记来区分不同的浏览器。

 

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

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

IE7/IE8/IE9/FireFox可以识别上面附加"!important"的语句，看到附加"!important"的语句后，就不会再去执行第二句，尽管他们也“认识”第二句，但是附加"!important"的语句拥有绝对优先级，只要有它存在，第二句就不允许执行。附加“!important”语句IE6无法识别，所以IE6会跳过附加“!important”的语句直接去执行第二句“height:900px”,第一句在IE6看来就是不存在的语句。

      利用浏览器对加了"!important"语句的识别能力，来解决一些在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上的效果不一样的情况。

 

 

补充：

IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，IE8能识别" \9"，但不能识别下划线"_"，而firefox两个都不能认识,却可以识别‘!important’.