CSS Hack

1.什么是CSS Hack?

由于不同厂商的浏览器，比如Internet Explorer、Chrome、Mozilla Firefox、Safari等，或者是统一厂商的浏览器的不同版本，比如IE6和IE7，对CSS的解析和认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候，我们就需要针对不同的浏览器，去写不同CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中，也能得到我们想要的页面效果。

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

2.原理：

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

3.表现形式

CSS Hack大致有3种表现形式，属性级Hack、选择器Hack以及IE条件Hack。

属性前缀法（属性级Hack）

比如IE6能识别下划线"_“和星号”" ，IE7能识别星号""，但不能识别下划线,IE6-IE10都认识"\9",而Firefox这三个都不能认识。 对于书写顺序的关系，一般是将识别能力强的浏览器的CSS写在后边

<style> 
div{  
    background:green;/*forfirefox*/  
    *background:red;/*forIE6 IE7*/  
}  
</style> 

这样的话，就成功的对IE6，7成功的做了一个hack。

选择器前缀法（选择器 Hack） 语法是这样的： selector{ sRules } 例如：IE6能识别*html .class{} , IE7能识别 +html .class{}或:first-child+html .class{}

例如：针对IE9的hack可以这么写：

:root .test
{
    background-color:green;
}

IE条件注释法（IE条件Hack), 针对所有IE（注：IE10+已经不再支持条件注释） IE条件Hack就比较特殊了，类似于程序语句，只能使用在HTML文件里，而不能在CSS文件中使用，并且只有在IE浏览器下才能执行，在其他浏览器下面会被当做注释视而不见。 比如: <!– 默认先调用css.css样式表 –> <link rel=“stylesheet” type=“text/css” href=“css.css” /> <!–[if IE 7]> <!– 如果IE浏览器版是7,调用ie7.css样式表 –> <link rel=“stylesheet” type=“text/css” href=“ie7.css” /> <![endif]–> <!–[if lte IE 6]> <!– 如果IE浏览器版本小于等于6,调用ie.css样式表 –> <link rel=“stylesheet” type=“text/css” href=“ie.css” /> <![endif]–> 注： lte：就是Less than or equal to的简写，也就是小于或等于的意思。 lt ：就是Less than的简写，也就是小于的意思。 gte：就是Greater than or equal to的简写，也就是大于或等于的意思。 gt ：就是Greater than的简写，也就是大于的意思。 ! ：就是不等于的意思，跟javascript里的不等于判断符相同。

 <!--[if IE]>IE浏览器显示的内容<![endif]--> 
 <!--[if lt IE6]>只在IE6及以下版本显示的内容<![endif]-->

这类hack不仅对CSS生效，对写在判断语句里边的所有代码都会生效 还有在属性值后面添加“!important”的写法只有IE6不能识别，其它版本IE及现代浏览器都可以识别,例如：

4.注意

①尽可能减少对CSS Hack的使用，Hack有风险，使用需谨慎。 ②一些CSS Hack由于浏览器存在交叉认识，所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。