不同的浏览器对CSS Hack的识别各异,可以据此来为不同的浏览器设定不同的CSS属性,解决很多兼容性问题!
目前的主要的浏览器版本一般为IE6、IE7、IE8、Firefox,因此主要是对这些浏览器的Hack
IE7与Firefox都识别!important,因此可以以此来排除IE6
(说明:!important它指定当前样式的优先级为高,后边再进行定义的相同样式是不会将其重置)
IE都可识别*,因此可以以此来排除非IE的浏览器
IE6可识别_,但IE7及Firefox不识别,因此可以用来排除IE7与Firefox
总结如下:
IE6,识别_,识别*,不识别!important
IE7,识别*,识别!important,不识别_
Firefox,识别!important,不识别_,不识别*
IE6 | IE7 | IE8 | Firefox | Chrome | |
_ | √ | x | x | x | x |
* | √ | √ | x | x | x |
!important | x | √ | √ | √ | √ |
据此就可写出应用于不同浏览器的CSS了
.Container1{
background:orange;/*非IE浏览器应用此设置*/
*background:green;/*IE7应用此设置*/
_background:blue;/*IE6及其更早版本应用此设置*/
}
.Container2{
background:orange !important;/*IE7及其它非IE浏览器应用此设置*/
background:blue;/*IE6及其更早版本应用此设置*/
}
.Container3{
background:orange;/*非IE浏览器应用此设置*/
*background:blue;/*IE浏览器应用此设置*/
}
注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面
除了在CSS类的属性上设置Hack以外,还可以在CSS类名上设置各种Hack
* html div{ background:green;}/*这个只有IE6支持*/
*+html div{ background:green;}/*这个只有IE7支持*/
html*div{ background:green;}/*这个只有IE6,IE7支持*/
body>div{ background:green;}/*只有IE6不支持*/