[TOC]
CSS hack
定义：针对不同的浏览器/不同版本写相应的CSS code的过程。 原因：由于不同厂商的浏览器或同一浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持和解析不一样，导致在不同览器的环境中呈现出不一致的页面展现效果。为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式。 原理：由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览情景来应用不同的CSS。 书写顺序：一般是将适用范围广、被识别能力强的CSS定义在前面。 注意：hack可以放在单独的CSS样式表中，使代码更容易维护。
一、条件注释法
IE浏览器专有，微软官方推荐使用的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前缀，以达到预期的页面展现效果
- IE浏览器各版本 CSS hack 对照表
| hack | code | IE 6 | IE 7 | IE 8 | IE 9 | IE 10 |
|---|---|---|---|---|---|---|
| * | *color | Y | Y | N | N | N |
| + | +color | Y | Y | N | N | N |
| - | -color | Y | N | N | N | N |
| _ | _color | Y | N | N | N | N |
| # | #color | Y | Y | N | N | N |
| \0 | color: red\0 | N | N | Y | Y | Y |
| \9\0 | color: red\9\0 | N | N | N | Y | Y |
| \9 | color: red\9 | Y | N | Y | Y | Y |
| !important | !important; color: green; | N | N | Y | Y | Y |
- 说明：在标准模式中
-减号是IE6专有的hack\9对IE 6/IE 7/IE 8/IE 9/IE 10生效\0对IE 8/IE 9/IE 10生效\9\0对IE 9/IE 10生效
三、选择器前缀法
针对一些页面表现不一致或者需要特殊对待的浏览器，在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有效 等等
结合CSS3的一些选择器，可衍生出更多的hack方式
四、JavaScript hack
以IE10为例：由于IE10用户代理字符串（UserAgent）为：Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)，所以可使用JavaScript将此属性添加到文档标签中，再运用CSS3基本选择器匹配。
- JavaScript代码:
var htmlObj = document.documentElement;
htmlObj.setAttribute('data-useragent',navigator.userAgent);
htmlObj.setAttribute('data-platform', navigator.platform );
- CSS3匹配代码：
html[data-useragent*='MSIE 10.0'] #id {
color: #F00;
}
五、CSS hack 利弊
- 一般情况下，尽量避免使用CSS hack，为了某些情况下顾及用户体验而实现向下兼容，才使用hack
- 例如由于IE8及以下版本不支持CSS3，但如果项目页面使用了大量CSS3新属性，在IE9/Firefox/Chrome下正常渲染，但在IE8中可能会出现不同情况
- 这种情况下如果不使用CSS3pie、htc或条件注释等方法时，就可以使用IE8的专属hack
- 使用hack虽然对页面表现的一致性有好处，但过多的滥用会造成html文档混乱不堪，增加管理和维护的负担
- 少用、慎用hack，在未来一定会促使浏览器厂商的标准趋于统一，顺利过渡到标准浏览器的主流时代
- 抛弃陈旧的IE hack，必将减轻编程的复杂度