用CSS hack来区分浏览器

wlsy — Sat, 28 Mar 2009 15:41:03 +0000

先来说说什么是CSS hack。这年头浏览器品种多种多样，每个浏览器的脾气也各不相同，那怎么让他们和睦相处呢？那就通过CSS hack来。其实更简单点说，根据每个浏览器的对CSS的解析不同，对不同浏览器写不同的CSS代码就叫CSS hack。因为CSS hack的写法很多，本文例子只针对Windows平台下的IE6，IE7，IE8，Firefox以及chrome（内核跟safari一样，所以应该不会有太多差别），好吧开始了。

针对单对象不同属性值的不同写法，用”_，*(像#,+等符合，以下都用*举例),!important”来区分

简要概述下：”_(下划线)”这个只针对IE6（其实6以下的版本也可以，不过不考虑了），“*”这个IE6,IE7浏览器都能识别，而!important这个除了IE6其他的都能支持。看表：

	IE6	IE7	IE8	Firefox	Chrome
_	√	x	x	x	x
*	√	√	x	x	x
!important	x	√	√	√	√

如表可知（IE8的出现导致了用*来区分IE和其他的浏览器失效），如果我们要区分IE6就可以这样：

div{ background:orange !important;background:green;}
/*或者这样*/
div{ background:orange;_background:green;}

上面那张表已经被我验证了应该不会有错。在书写浏览器要把那些比较现代的浏览器（像Fx，chrome）写在前面。在举个例子：

background:orange;*background:green !important;*background:blue;

解释下：浏览器从左边开始执行，第一条background:orange；所有浏览器都能识别，第二条*background:green !important；这里有用到两个来区分*来表示这能被IE6和IE7支持，!important不能被IE6识别，而最后面*background:blue;IE6,和IE7都能识别，但是因为！important优先级更高，所以整句语句用来区分Fx,IE7,IE6。

针对一个对象的不同写法

还是用例子来说话

* html div{ background:green;}/*这个只有IE6支持*/

*+html div{ background:green;}/*这个只有IE7支持*/

html*div{ background:green;}/*这个只有IE6，IE7支持*/

body>div{ background:green;}/*只有IE6不支持*/

用条件注释区分不同文件。

比如这样：

<!--[if IE]>
你可以在这里放些东西，或者一些特定的style或javascript而且只有是ie浏览器才能执行。
<![endif]-->

另外也可以定义IE的版本比如一些内容，这样也就只在IE8下生效，其他的类似。另外还有一些比如低于等于（lte）或高于等于(gte)的参数可以参照：http://msdn.microsoft.com/en-us/library/ms537512.aspx

不过这些条件注释只针对IE有效，如果要针对其他浏览器，可以用Conditional-CSS这个需要给服务器安装脚本，延伸阅读：http://www.qianduan.net/?p=6166

总结：其实还有一张很详细的表格，不过大部分都用不到，也会比较容易混淆，感兴趣的可以看看：。CSS hack 其实还有很多，比如之前的清除浮动也用到了伪类。不过在书写代码的时候还是要尽量少用CSS hack，按标准来写，迫不得已的在用CSS hack。

本文经我都测试通过，如果还有错误或者一些其他实用的hack也可以留言。

wlsy » CSS hack

用CSS hack来区分浏览器