CSS：关于CSS Hack

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

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

CSS Hack的3种主要表现形式：

　　（一）CSS类内部Hack

　　是指CSS属性或属性值里加上只有某个浏览器自己可以识别的特殊字符串。CSS Hack主要针对类内部Hack：比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。

body{
*background:black; /* IE6和IE7下的显示 */
background:green; /* firefox下的显示 */
}

　　（二）CSS选择器Hack

　　是指在CSS选择器前面加上只有某种浏览器自己可以识别的特殊字符串。如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。

　　（三）HTML头部引用(if IE)Hack

　　这种形式主要是针对IE浏览器。针对所有IE：<!--[if IE]><!--代码--><![endif]-->，针对IE6及以下版本：<!--[if lt IE 7]><!--代码--><![endif]-->，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

<!--[if lte IE 8]> <!-- IE条件注释-->
<link src="iecss.css" rel="stylesheet" />
<![endif]--> 

这种写法会被非IE的浏览器所忽略，只有IE浏览器才会执行上面的代码，上面这段代码的意思是当IE的版本是8或者比8低的IE浏览器才会执行下面的样 式。例子中有一个运算符号lte，它是less than or equal to的简写，意思是小于等于，其他的运算符号还有lt（less than，小于）、gte（greater than or equal to，大于等于）、gt（greater than，大于）。

常用的CSS Hack 方式：

　　（一）方式一：条件注释法

只在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]-->

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

　　属性前缀法是在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

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

　　选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在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有效等等