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