前提：前端开发中，经常遇到浏览器解析不一致，同样的代码，页面展示却不一致的情况，尤其是IE对CSS解析的认识不同，因此我们开发中要想实现得到想要的一致的效果，就会使用到CSS hack
原理
不同的浏览器对CSS的支持及解析结果不一样，还有CSS中匹配的优先级不同，我们可以更具不同的浏览器来适配不同的CSS，书写顺序，一般是将识别能力强的浏览器的CSS写在后面；
常用的CSS hack方式
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前缀，以达到想要的页面展现效果；
IE浏览器各版本 CSS hack 对照表
| hack |
写法 |
实例 |
IE6(S) |
IE6(Q) |
IE7(S) |
IE7(Q) |
IE8(S) |
IE8(Q) |
IE9(S) |
IE9(Q) |
IE10(S) |
IE10(Q) |
| * |
*color |
青色 |
Y |
Y |
Y |
Y |
N |
Y |
N |
Y |
N |
Y |
| + |
+color |
绿色 |
Y |
Y |
Y |
Y |
N |
Y |
N |
Y |
N |
Y |
| - |
-color |
黄色 |
Y |
Y |
N |
N |
N |
N |
N |
N |
N |
N |
| _ |
_color |
蓝色 |
Y |
Y |
N |
Y |
N |
Y |
N |
Y |
N |
N |
| # |
#color |
紫色 |
Y |
Y |
Y |
Y |
N |
Y |
N |
Y |
N |
Y |
| \0 |
color:red\0 |
红色 |
N |
N |
N |
N |
Y |
N |
Y |
N |
Y |
N |
| \9\0 |
color:red\9\0 |
粉色 |
N |
N |
N |
N |
N |
N |
Y |
N |
Y |
N |
| !important |
color:blue !important;color:green; |
棕色 |
N |
N |
Y |
N |
Y |
N |
Y |
N |
Y |
Y |
说明：在标准模式中
“-″减号是IE6专有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效，是IE9/10的hack
demo：
.demo{
background-color:red; /* 所有浏览器 */
background-color:blue !important; /* 所有浏览器，IE6除外 */
*background-color:black; /* IE6, IE7 */
+background-color:yellow; /* IE6, IE7 */
background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */
background-color:purple\0; /* IE8, IE9, IE10 */
background-color:orange\9\0; /*IE9, IE10*/
_background-color:green; /* 只适用于IE6 */
}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有效等等
注意：为了代码整洁易读，尽可能减少对CSS Hack的依赖和使用。Hack有风险，使用需谨慎，我们在顾及用户体验实现向下兼容的情况，特殊情况才使用hack。