IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表

时间：2011-05-08 来源：BGrace

浏览器兼容问题一直是前段开发工程师比较头痛的问题，熟悉了里面的规则也就变得简单了，这里有一份资料可以分享给大家，大家平时开发过程中遵循这个规律的话，会变得轻松多了：

各浏览器CSS hack兼容表：

IE6 IE7 IE8 Firefox Chrome Safari
!important    Y   Y
_ Y
* Y Y
*+    Y
\9 Y Y Y
\0      Y
nth-of-type(1)          Y Y

代码示例：

#test{
color:red; /* 所有浏览器都支持 */
color:red !important;/* Firefox、IE7支持 */
_color:red; /* IE6支持 */
*color:red; /* IE6、IE7支持 */
*+color:red; /* IE7支持 */
color:red\9; /* IE6、IE7、IE8支持 */
color:red\0; /* IE8支持 */
}

body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */

整体测试代码示例：

.test{
color:#000000;
color:#0000FF\0;
[color:#00FF00;
*color:#FFFF00;
_color:#FF0000;
}

其他说明：

1、如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，此代码如下：
<meta http-equiv=”x-ua-compatible” content=”ie=7″ />

2、body:nth-of-type(1) 如果这样写，表示全局查找body，将会对应第一个<body>。

3、还有其他写法，比如：
*html #test{}或者 *+html #test{}

4、*+html 对IE7的hack 必须保证HTML顶部有如下声明：

http://www.w3.org/TR/html4/loose.dtd

5、顺序：Firefox、IE8、IE7、IE6依次排列。

小知识：什么是CSS hack？

　　由于不同的浏览器，比如IE6、IE7、IE8、Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。