如何通过CSS-HACK为不同的浏览器设置不同的CSS属性

说明：

在看本文前你可能需要先熟悉一下关于CSS-HACK的知识。以下通过HACK方式在同一个CSS文件中为不同的浏览器定义不同的CSS属性。

示例代码：

p {
	border-color:red; /* FF */
	border-color:blue\9; /* IE8 */
	*border-color:brown; /* IE7 */
	_border-color:darkorchid ; /* IE6 */
}
body:nth-of-type(1) p {
	border-color:gold; /* GC、Safari */
}

分析：

firefox不能识别(注：“识别”可以理解为“忽略”)属性中的“\9”、“*”、“_”，而且没有“body:nth-of-type(1)”元素，所以这些规则都会被FF认为是错误写法面忽略（注：其实这些符号本身就是错误的），最终只保留了“border-color:red;”。

IE8可以识别属性值后边的“\9”，不能识别“*”、“_”和“body:nth-of-type(1)”元素，所以border-color的值red将会被下一条的“blue”覆盖，所以IE8显示BLUE色

IE7可以识别“\9”和“*”，所以对IE7来说，blue会覆盖red、然后brown又会覆盖blue，最终IE采用了值“brown”。

IE6可以识别“\9”、“*”、“_”，不能识别“body:nth-of-type(1)”元素，所以IE6最终采用了“darkorchid”。

Chrome可以识别“body:nth-of-type(1)”，但不认识“\9”、“*”、“_”，所以GC采用“gold”。

总结：

“body:nth-of-type(1)”元素只有webkit核心的GC和Safari可以识别；

“\9”可以被IE全系列识别；

“*”和“_”可以被IE6识别；

“*”可以被IE7识别；

所以在写样式的时候可以使用逐级覆盖的方式为每个浏览器分配各自需要的样式

CSS-HACK图：

CSS-HACK表

＜完＞