CSS hack

浏览数：39 / 时间：2015年06月09日

虽然CSS hack技术有风险，不推荐使用，但还是有必要了解一下。

一、什么是CSS hack？

我的理解就是针对不同浏览器/不同版本，写相应CSS代码，这一过程叫做CSS hack。

二、CSS hack原理

由于不同浏览器/不同版本，对CSS的理解会有差异，以及CSS优先级的关系，我们可以据此针对不同的浏览器/版本写不同的CSS。

三、CSS hack分类

CSS hack主要可分为：选择器hack，CSS属性hack和IE条件hack。

1、选择器hack

选择器hack就是在选择器前加上一些只有特定浏览器才能识别的前缀进行hack。

比较常用的有以下几种：

*html　　　　*前缀只对IE6生效
*+html　　　*+前缀只对IE7生效
@media screen\9{...}只对IE6/IE7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: red; }}只对IE6/7/8有效
@media screen\0 {body { background: red; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
:root body{background:red\9;}只对IE9有效

2、CSS属性hack

CSS属性hack就是在CSS属性名前加上一此只有特定浏览器才能识别的前缀进行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	N	N	N	N	N
+	+color	Y	Y	Y	Y	N	Y	N	Y	N	Y
-	-color	Y	Y	N	N	N	N	N	N	N	N
_	_color	Y	Y	N	Y	N	Y	N	Y	N	N
#	#color	Y	Y	Y	Y	N	Y	N	Y	N	Y
\0	color:red\0	N	N	N	N	Y	N	Y	N	Y	N
\9\0	color:red\9\0	N	N	N	N	N	N	Y	N	Y	N
important	color:red !important	N	N	Y	N	Y	N	Y	N	Y	Y

在标准模式中：

"-"减号是IE6特有的

“\9”是IE6~IE10都有效

"\0"是IE8~IE10的hack（最新opera也识别）

"\9\0"是IE9/E10的hack

由于浏览器对一些CSS hack存在交叉认识，所以需要通过覆盖的方式来实现对不同浏览器的hack。如下例子：

    #test   
     {   
　　　    color:blue;      /*firefox*/
         color:red\9;      /*all ie*/
         color:yellow\0;    /*ie8*/
         *color:pink;        /*ie7*/
         _color:orange;       /*ie6*/
     }  
     :root #test { color:purple\9; }  /*ie9*/
     @media all and (min-width:0px){ #test {color:black\0;} }  /*opera 如果不加\0,firefox，chrome，safari也都认识*/
     @media screen and (-webkit-min-device-pixel-ratio:0){ #test {color:gray;} }  /*chrome and safari*/