由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!
由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。
CSS hack方式一：条件注释法
这种方式是IE浏览器专有的Hack方式，微软官方推荐使用的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方式二：类内属性前缀法
属性前缀法是在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
E10、IE11和Microsoft Edge的Hack:
随着Win10的推广，Microsoft Edge浏览器已经越来越普遍，但是IE11也是伴随其中，尾大不掉。
首先，了解一下概念，如下图：微软Edge浏览器和EdgeHTML是两种不同的东西。Edge是一款浏览器，而EdgeHTML是渲染引擎，用于处理和渲染网页元素。既然二者有本质区别，他们的更新版本也就完全不同。如果有网站依赖于引擎版本号，而非浏览器版本，就可能引起网站错误。
下面就介绍一下IE10、IE11和Microsoft Edge的Hack的大全：
CSS-Hack for Microsoft Edge Browser 12+
@supports (-ms-accelerator:true) {
.selector { property:value; }
}
CSS-Hack for Microsoft Edge Browser 12+
_:-ms-lang(x),
_::-webkit-meter-bar,
.selector {
property:value;
}
CSS-Hack for Microsoft Edge Browser 12+
_:-ms-lang(x),
_:-webkit-full-screen,
.selector {
property: value;
}
CSS-Hack for Microsoft Edge Browser 12 only
@supports (-ms-accelerator:true) and (not (color:unset)) {
.selector { property:value; }
}
CSS-Hack for Microsoft Edge Browser 13+
@supports (-ms-accelerator:true) and (color:unset) {
.selector { property:value; }
}
CSS-Hack for Microsoft Edge Browser 13+
_:-ms-lang(x),
_::-webkit-meter-bar,
.selector {
property:value;
}
CSS-Hack for Internet Explorer 11+（IE11、Edge）
@charset "<Any Modern Browser but MSIE 10- or FF 18- >";
_:-ms-lang(x), .selector { property:value; }
CSS-Hack for Internet Explorer 11 only
_:-ms-fullscreen,
:root .selector {
property: value;
}
CSS-Hack for Internet Explorer 10+（IE10、IE11、Edge）
_:-ms-lang(x),
.selector {
property: value;
}
CSS-Hack for Internet Explorer 10 only
_:-ms-lang(x),
.selector {
property: value9;
}
CSS-Hack for Internet Explorer 9+（IE9、IE10、IE11）
_::selection,
.selector {
property: value;
}
CSS-Hack for Internet Explorer 8+（IE9、IE10、IE11）
@media screen {
.selector {
property: value;
}
}
Any non-Microsoft modern browsers (Safari 9+, Chrome 28+, Firefox 22+)
@supports (not (-ms-accelerator:true)) {
.selector {
property:value;
}
}
文章源自 设计联盟 www.DesignLinks.cn 中国最具影响力的创意设计综合网站
