最近总结了一下css hack技巧,并且也从网上浏览了的一些资料,同时也发现网上很多博文其实都是在相互转载一些相同的资料,并没有真正验证过,其中有几个说的并不准确甚至是错的地方,因此本人将这些都重新测试了一遍,总结得出如下表格:
符号 | 浏览器 |
IE6 |
IE7 |
IE8 |
IE9 |
FF |
* |
√ |
√ |
× |
× |
× |
!important |
× |
√ |
√ |
√ |
√ |
_ |
√ |
× |
× |
× |
× |
\0 |
× |
× |
√ |
√ |
× |
\9 |
√ |
√ |
√ |
√ |
× |
*html |
√ |
× |
× |
× |
× |
+ |
√ |
√ |
× |
× |
× |
*+html |
× |
√ |
× |
× |
× |
:root |
× |
× |
× |
√ |
√ |
注:以上结果是本人亲测之后得出,测试环境为:虚拟机中的IE6,物理机中IE9浏览器以及其自带的IE7,8模式,FF版本为19.0.2。
再附上各符号的具体写法如下:
1 #bg{ 2 background: red; 3 _background: red; 4 *background: red; 5 +background: red; 6 background: red\0; 7 background: red\9; 8 background: red!important; 9 } 10 :root #bg{ 11 background: red; 12 } 13 *html #bg{ 14 background: red; 15 } 16 *+html #bg{ 17 background: red; 18 }
一些方法可能不是一个浏览器所独有的,可能会有两个或以上的浏览器认识,但只要将几种方法配合使用就能写出只有某一个浏览器才识别的css。
:root div{background: red\9;} 这句代码只有IE9才能识别
不过应该尽可能减少对CSS Hack的使用。Hack有风险,使用需谨慎。
条件注释
只有IE可读的IE条件注释是:
<!--[if IE (lt gt lte gte) (version)]> <![endif]-->
非IE条件注释:
<!--[if !IE (version)]>--> non-IE HTML Code <!--<![endif]-->
后续更新
想了解更多可以到http://browserhacks.com/