首页 > 代码库 > CSS Hack
CSS Hack
CSS Hack：不同厂家的浏览器或者相同厂家不同版本的浏览器对于css的解析是不完全相同的，这样就导致了浏览器的页面生成的效果会不一样。CSS Hack的作用就是使得css在不同的浏览器中兼容，让不同的浏览器生成我们想要的效果的页面。（CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。）
常用的CSS Hack方式：
（1）注释法 （条件Hack） （2）类内属性前缀法 （属性级Hack）（3）选择器前缀法（选择符级Hack）
（1）注释法 （条件Hack）：
语法：<!--[if IE]>这段文字只在IE浏览器显示<![endif]-->
注意：if条件Hack是HTML级别的（包含但不仅是CSS的Hack，可以选择任何HTML代码块）
不同浏览器的不同条件表：
| 只在IE下生效 | 只在IE6下生效 | 只在IE6以上版本生效 | 只在IE8上不生效 | 非IE浏览器生效 |
|
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->
|
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->
|
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->
|
<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->
|
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->
|
（2）类内属性前缀法 （属性级Hack）
语法：selector{<hack>？property：value<hack>?;}
注意：尽可能减少对CSS Hack的使用。Hack有风险，使用需谨慎
通常如未作特别说明，本文档所有的代码和示例的默认运行环境都为标准模式。
一些CSS Hack由于浏览器存在交叉认识，所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。
IE浏览器各个版本CSS Hack对照表：
| hack | 写法 | 实例 | IE6(S) | IE6(Q) | IE7(S) | IE7(Q) | IE8(S) | IE8(Q) | IE9(S) | IE9(Q) | IE10(S) | IE10(Q) |
| * | *color | 青色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
| + | +color | 绿色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
| - | -color | 黄色 | Y | Y | N | N | N | N | N | N | N | N |
| _(IE6专有的hack) | _color | 蓝色 | Y | Y | N | Y | N | Y | N | Y | N | N |
| # | #color | 紫色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
|
\0（“\9″ IE6/IE7/IE8/IE9/IE10都生效） （“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack） |
color:red\0 | 红色 | N | N | N | N | Y | N | Y | N | Y | N |
| \9\0（只对IE9/IE10生效，是IE9/10的hack） | color:red\9\0 | 粉色 | N | N | N | N | N | N | Y | N | Y | N |
| !important | color:blue !important;color:green; | 棕色 | N | N | Y | N | Y | N | Y | N | Y | Y |
（3）选择器前缀法（选择符级Hack）
语法：<hack>selector{sRules}
注意：与（2）的注意相同。
常用的几个例子：
|
CSS Hack