css的hack

（一）原理

CSS Hack大致有3种表现形式：

1、CSS类内部Hack

2、选择器Hack

3、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：

针对IE5.5~9：
<!--[if IE]>
这段文字只在IE(5.5,6,7,8,9)浏览器版本下显示，注：在IE10和IE11下不显示
<![endif]-->
针对IE6及以下版本：
<!--[if lt IE 7]>在低于IE7的浏览器显示，不包括IE7<![endif]
这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

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

（二）常用的css的hack方式

（1）方式一 条件注释法

<!--[if IE]>
这段文字只在IE(5.5,6,7,8,9)浏览器版本下显示，注：在IE10和IE11下不显示
<![endif]-->

<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->

<!--[if gte IE 6]>
这段文字只在IE6及以上版本IE浏览器显示，注：在IE10和IE11下不显示
<![endif]-->

<!--[if ! IE 8]>
这段文字在非IE8浏览器显示,注：在IE10和IE11下不显示
<![endif]-->

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

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