css成名史

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

CSS hack 原理就是利用CSS中优先级的关系。

CSS hack 大致有3种表现形式，CSS类内部Hack、选择器Hack 以及HTML头部引用（if IE）HACK。

内部Hack：

IE6 识别： "_" 和 " * "; IE7识别：" * ";

选择器Hack：IE6识别 ：*html .class{}；IE7识别：*+html .class{} 或者 *:first-child+html .class{} 

HTML头部引用(if IE)Hack ：针对所有IE：<!--[if IE]><!--代码 --><![endif]-->；针对IE6及以下版本:<!--[if lt IE 7]><!-- 代码--><![endif]-->；这类hack不仅对CSS生效，对写在判断语句里的所有代码都会生效.

书写顺序，一般是将识别能力强的浏览器的CSS写在后面。

（1）方式一 条件注释法

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

（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 \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有效