hack是什么

不同浏览器对css的解析是不同是，因此需要css hack来解决浏览器局部的兼容性问题。针对不同浏览器写不同的CSS代码的过程叫CSS  Hack。

常见的hack有三种形式，分别是CSS属性hack，CSS选择符hack，IE条件注释hack，hack主要针对IE浏览器。

CSS属性hack：如IE6能识别"_"和"*",IE7能识别"*",不能识别"_",firefox两个都不能识别。

color:red;//所有浏览器识别

_color:red;//IE6识别

*color:red;//IE6、IE7识别

+color:red;//IE6、IE7识别

*+color:red;//IE6、IE7识别

[color:red;//IE6、IE7识别

color:red\9;//IE6、IE7、IE8、IE9识别

color:red\0;//IE8、IE9识别

color:red\9\0;//IE9识别

color:red \0;//IE9识别

color:red!important;IE6不识别！important

CSS选择符hack:IE6能识别*html.class{},IE7能识别*+html.class{}或者*：first-child+html.class{}。

*html #demo{color:red;} //IE6识别

*+html #demo{color:red;} //IE7识别

body:nth-of-type(1) #demo{color:red}  //IE9、FF3.5+、Chrome、Safari、Opera识别

head:first-child+body #demo{color:red}  //IE7+、FF、Chrome、Sarari、Opera识别

:root #demo{color:red\9} //仅IE9识别

IE条件注释hack:IE条件注释从IE5开始提供的一种非标准逻辑语句只在IE有有效，其他浏览器被当做注释。

<!--[if IE]>IE可见<![endif]-->

<!--[if IE 6]>IE6可见<![endif]-->

<!--[if IE 7]>IE7可见<![endif]-->

<!--[if !IE 7]>IE不可见<![endif]-->

<!--[if gt IE 6]>IE6以上版本可见<![endif]-->

<!--[if gte IE 6]>IE6和IE6以上版本可见<![endif]-->

<!--[if lt IE 7]>IE7以下版本可见<![endif]-->

<!--[if lte IE 7]>IE7和IE7以下版本可见<![endif]-->

<!--[if !IE]>IE不可见<![endif]-->

由于IE6不支持！improtant，ff支持！important，所以用来区分浏览器。

<style type="text/css">

.demo{

color:red !important;

color:green;

}

</style>

<div class="demo">abc</div>

在ie6中字体为绿色，在FF中字体为红色。

注意：在一个选择器里面,!important改变优先级，IE6下是无效的，后面的样式覆盖前面的样式。在有多个选择器的时候，!important有效的。

<style type="texe/css">

.demo{

color:red !important;

}

.demo{

color:green;

}

</style>

<div class="demo">abc</div>

在多选择符的时候也要注意IE6的显示情况：

#name.a1.a2 {color:red};

.a1.a2 {color:red};

在IE7+和FF/OPERA/SAFARI都支持，在IE6上则被理解为：

#name.a2 {color:red};

.a2 {color:red};

前面的类名会被后面的类名覆盖掉。可考虑不用类组合的形式。

本学习内容来源于  前端客 的分享：http://www.qdker.com/archives/138.html