what

由于不同厂商的浏览器或某浏览器的不同版本（IE6~IE11，Firefox/Safari/Opera/Chrome等），对css的支持、解析不一样。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同的版本写特定的css样式，把这个针对不同浏览器/不同版本写相应的css code的过程叫做css hack。

how

由于不同的浏览器和浏览器的各版本对css的支持及解析结果不一样，以及css优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景应用不同的css。

css hack 分类

有三种表现形式，css属性前缀法，选择器前缀法，以及IE条件注释法。

属性前缀法（即类内部hack）

选择器前缀法

IE条件注释法

css hack一般是将适用范围广，被识别能力强的css定义在前面。

css hack方式一：条件注释法（适用于IE10以下，IE10以后不再支持条件注释）

gt：greater than，选择条件版本以上版本，不包含条件版本。

lt： less than ，选择条件版本以下版本，不包含条件版本。

gte：greater than or equal ，选择条件版本以上版本，包含条件版本。

lte：less than or equal ，选择条件版本以下版本，包含条件版本。

！：选择条件版本以外所有版本，无论高低。

条件注释属性：

实例

非IE

html脚本中平常的注释方法，条件注释法只有IE10以下的IE浏览器可以识别，对于别的浏览器那么就只能看见的是一对封闭的不起作用的注释。对于非IE 的注释，注意里面有一个是起到封闭注释的作用。

css hack方式二：类内属性前缀法

属性前缀是在CSS样式属性名上加上一些只有特定浏览器才能识别的hack前缀，已达到预期的页面展现效果。

以下讨论的是标准模式中的hack方法

规则

*color：IE5.5、6、7

+color : IE5.5、6、7

＃color : IE5.5、6、7

-color：IE5.5、6

＿color: IE5.5、6

这几个当中，我喜欢用＊与 ＿

color\0 : IE8、9、10、11（12以上没测）（此处有些地方说欧朋也识别，可是我测试啦，不管用，不知道啊）

color\9 : IE6、7、8、9、10（11不支持）

color\9\0:IE8、9、10（其他不支持）

\9\0取了共集

color:red!important提高该设置的优先级

css hack方式三：选择器前缀法

规则

@media screen\9{……}（只对IE6、7生效）

@media \0screen{……}（只对IE8生效）

@media \0screen\,screen\9{……}（对IE6,7,8生效）

@media screen\0{……}（只对IE8、9、10生效）

@media screen and (min-width:0\0){……}（只对IE9，10有效）

@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){……}（对IE10,11有效，以上没测）

hack 利弊

尽量避免使用css hack，但有些情况下，为了顾及用户体验实现向下兼容，不得已才使用hack。但过多使用会造成html文档混乱不堪，增加管理和维护的负担。

CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome

等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效

果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

1.原理

由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。

CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack，CSS Hack主要针对类内部Hack：比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。等等

选择器Hack：比如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。等等

HTML头部引用(if IE)Hack：针对所有IE：<!--[if IE]><!--您的代码--><![endif]-->，针对IE6及以下版本：<!--[if lt IE 7]><!--您的代码--><![endif]-->，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

书写顺序，一般是将识别能力强的浏览器的CSS写在后面。下面如何写里面说得更详细些。

2、常用的CSS hack方式

（1）方式一 条件注释法

只在IE下生效

<!--[if IE]>

这段文字只在IE浏览器显示

<![endif]-->

只在IE6下生效

<!--[if IE 6]>

这段文字只在IE6浏览器显示

<![endif]-->

只在IE6以上版本生效

<!--[if gte IE 6]>

这段文字只在IE6以上(包括)版本IE浏览器显示

<![endif]-->

只在IE8上不生效

<!--[if ! IE 8]>

这段文字在非IE8浏览器显示

<![endif]-->

非IE浏览器生效

<!--[if !IE]>

这段文字只在非IE浏览器显示

<![endif]-->

（2）方式二 类内属性前缀法

属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。

IE浏览器各版本 CSS hack 对照表

说明：在标准模式中

“-″减号是IE6专有的hack

“\9″ IE6/IE7/IE8/IE9/IE10都生效

“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack

“\9\0″ 只对IE9/IE10生效，是IE9/10的hack

（3）CSS hack方式三：选择器前缀法

选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

目前最常见的是

*html *前缀只对IE6生效*+html *+前缀只对IE7生效@media

screen\9{...}只对IE6/7生效@media \0screen {body { background: red

}}只对IE8有效@media \0screen\,screen\9{body { background: blue

}}只对IE6/7/8有效@media screen\0 {body { background: green}}

只对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有效等等

3、实际应用

比如要分辨IE6和firefox两种浏览器，可以这样写：

div{

background:green/*forfirefox*/

*background:red/*forIE6*/(bothIE6&&IE7)

}

我在IE6中看到是红色的，在firefox中看到是绿色的。

解释一下：

上面的css在firefox中，它是认识不了后面的那个带星号的东西是什么的，于是将它过滤掉，不予理睬，解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。

在IE6中呢，它两个background都能识别出来，它解析得到的结果是:div{background:green*background:red},于是根据优先级别，处在后面的red的优先级高，于是当然这个div的背景颜色就是红色的了。

CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。 属性前缀法(即类内部Hack)：例如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。 选择器前缀法(即选择器Hack)：例如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。 IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： <!--[if IE]>IE浏览器显示的内容 <![endif]-->，针对IE6及以下版本： <!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。 具体不展开，可看资料搜索“史上最全的CSS hack方式一览”

---