对于CSS Hack的经验总结

作者：Terry2016.11.23来源：Web前端之家浏览：16478评论:1

关键词：hack 兼容

谈到CSS Hack，大家应该很熟悉了。如果你CSS Hack用的少，说明你的代码写得不错，这个也是有道理的；但是这不是绝对的，有些地方必须用到hack技术，比如动画兼容问题等。

在诸多的项目中，遇见过或多或少的CSS Hack，今天主要想把一些经验分享出来，可以加入前端群：295431592。

CSS Hack的缘由

由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS，于是产生了CSS Hack。

CSS Hack类别

CSS Hack主要分三种形式，下面针对这三种形式进行分析。

1、属性前缀法(即类内部Hack)

属性前缀法(即类内部Hack)：例如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。这种方法我们用的最多。

使用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

下面来看几个DEMO实例：

<script type="text/javascript">  
    //alert(document.compatMode);  
</script>  
<style type="text/css">  
body:nth-of-type(1) .iehack{  
    color: #F00;/* 对Windows IE9/Firefox 7+/Opera 10+/所有Chrome/Safari的CSS hack ，选择器也适用几乎全部Mobile/Linux/Mac browser*/  
}  
.demo1,.demo2,.demo3,.demo4{  
    width:100px;  
    height:100px;  
}  
.hack{  
/*demo1 */  
/*demo1 注意顺序，否则IE6/7下可能无法正确显示，导致结果显示为白色背景*/  
    background-color:red; /* All browsers */  
    background-color:blue !important;/* All browsers but 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; /* Only works in IE6 */  
    *+background-color:pink; /*  WARNING: Only works in IE7 ? Is it right? */  
}  
  
/*可以通过javascript检测IE10，然后给IE10的<html>标签加上class=”ie10″ 这个类 */  
.ie10 #hack{  
    color:red; /* Only works in IE10 */  
}  
  
/*demo2*/  
.iehack{  
/*该demo实例是用于区分标准模式下ie6~ie9和Firefox/Chrome的hack，注意顺序 
IE6显示为：绿色， 
IE7显示为：黑色， 
IE8显示为：红色， 
IE9显示为：蓝色， 
Firefox/Chrome显示为：橘色， 
（本例IE10效果同IE9,Opera最新版效果同IE8） 
*/  
    background-color:orange;  /* all - for Firefox/Chrome */  
    background-color:red\0;  /* ie 8/9/10/Opera - for ie8/ie10/Opera */  
    background-color:blue\9\0;  /* ie 9/10 - for ie9/10 */  
    *background-color:black;  /* ie 6/7 - for ie7 */  
    _background-color:green;  /* ie 6 - for ie6 */  
}  
  
/*demo3 
实例是用于区分标准模式下ie6~ie9和Firefox/Chrome的hack，注意顺序 
IE6显示为：红色， 
IE7显示为：蓝色， 
IE8显示为：绿色， 
IE9显示为：粉色， 
Firefox/Chrome显示为：橘色， 
（本例IE10效果同IE9，Opera最新版效果也同IE9为粉色） 
 
*/  
.element {  
    background-color:orange;    /* all IE/FF/CH/OP*/  
}  
.element {  
    *background-color: blue;    /* IE6+7, doesn't work in IE8/9 as IE7 */  
}  
.element {  
    _background-color: red;     /* IE6 */  
}  
.element {  
    background-color: green\0; /* IE8+9+10  */  
}  
:root .element { background-color:pink\0; }  /* IE9+10 */  
  
/*demo4*/  
/* 
 
该实例是用于区分标准模式下ie6~ie10和Opera/Firefox/Chrome的hack，本例特别要注意顺序 
IE6显示为：橘色， 
IE7显示为：粉色， 
IE8显示为：黄色， 
IE9显示为：紫色， 
IE10显示为：绿色， 
Firefox显示为：蓝色， 
Opera显示为：黑色， 
Safari/Chrome显示为：灰色， 
 
*/  
.hacktest{   
    background-color:blue;      /* 都识别，此处针对firefox */  
    background-color:red\9;      /*all ie*/  
    background-color:yellow\0;    /*for IE8/IE9/10 最新版opera也认识*/  
    +background-color:pink;        /*for ie6/7*/  
    _background-color:orange;       /*for ie6*/  
}  
  
@media screen and (min-width:0){   
    .hacktest {background-color:black\0;}  /*opera*/  
}   
@media screen and (min-width:0) {   
    .hacktest { background-color:purple\9; }/*  for IE9/IE10  PS:国外有些习惯常写作\0，根本没考虑Opera也认识\0的实际 */  
}  
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {   
   .hacktest { background-color:green; } /* for IE10+ 此写法可以适配到高对比度和默认模式，故可覆盖所有ie10的模式 */  
}  
@media screen and (-webkit-min-device-pixel-ratio:0){ .hacktest {background-color:gray;} }  /*for Chrome/Safari*/  
  
/* #963棕色 :root is for IE9/IE10, 优先级高于@media, 慎用！如果二者合用，必要时在@media样式加入 !important 才能区分IE9和IE10 */  
/* 
:root .hacktest { background-color:#963\9; }  
*/  
</style>

显示出来的效果如下：

各位童鞋可以复制代码到浏览器中预览。

上面只是针对IE CSS Hack，接下来我们看下综合浏览器的，如下表格：

标记	IE6	IE7	IE8	FF	Opera	Sarari
[*+><]	√	√	X	X	X	X
_	√	X	X	X	X	X
\9	√	√	√	X	X	X
\0	X	X	√	X	√	X
@media screen and (-webkit-min-device-pixel-ratio:0){.bb {}}	X	X	X	X	X	√
.bb , x:-moz-any-link, x:default	X	√	X	√(ff3.5及以下)	X	X
@-moz-document url-prefix(){.bb{}}	X	X	X	√	X	X
@media all and (min-width: 0px){.bb {}}	X	X	X	√	√	√
* +html .bb {}	X	√	X	X	X	X
游览器内核	Trident	Trident	Trident	Gecko	Presto	WebKit

（以上 .bb 可更换为其它样式名）

注意：网上很多资料中常常把!important也作为一个hack手段，其实这是一个误区。!important常常被我们用来更改样式，而不是兼容hack。造成这个误区的原因是IE6在某些情况下不主动识别!important,以至于常常被人误用做识别IE6的hack。可是，大家注意一下，IE6只是在某些情况下不识别（ie6下，同一个大括号里对同一个样式属性定义，其中一个加important 则important标记是被忽略的，例：{background:red!important; background:green;} ie6下解释为背景色green，其它浏览器解释为背景色red；如果这同一个样式在不同大括号里定义，其中一个加important 则important发挥正常作用，例：div{background:red!important} div{background:green}，这时所有浏览器统一解释为背景色red。）

估计看得有点晕了，o(∩_∩)o ，还是列举几个实例。

实例一

适用范围：IE:6.0,IE7.0,IE8.0,Firefox之间的兼容

.bb{
    height:32px;
    background-color:#f1ee18;/*所有识别*/
    background-color:#00deff\9; /*IE6、7、8识别*/
    +background-color:#a200ff;/*IE6、7识别*/
    _background-color:#1e0bd1;/*IE6识别*/
}
.bb, x:-moz-any-link, x:default{background-color:#00ff00;}/*IE7 firefox3.5及以下 识别 */ 
@-moz-document url-prefix(){.bb{background-color:#00ff00;}}/* 仅firefox 识别 */ 
* +html .bb{background-color:#a200ff;}/* 仅IE7 识别 */
/*一个用于展示的class为bb的div标签*/
<div class="bb"></ div>

这个主要是IE和火狐之间的hack区分，IE中对伪类支持不广泛，所以伪类是个不错的途径。这里要注意下：这个区分伪类往往IE7也能识别，所以最好还需要把IE7单独识别出来，且此方法对ff3.6 已无效，firefox的区分可以使用@-moz-document url-prefix(){}。

实例二

适用范围：IE:6.0,IE7.0,IE8.0,Firefox,Safari(Chrome)之间的兼容。

.bb{
height:32px;
background-color:#f1ee18;/*所有识别*/
background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
@media screen and (-webkit-min-device-pixel-ratio:0){.bb{background-color:#f1ee18}}{} /*safari(Chrome) 有效 */
.bb, x:-moz-any-link, x:default{background-color:#00ff00;}/*IE7 firefox3.5及以下 识别 */
@-moz-document url-prefix(){.bb{background-color:#00ff00;}}/*仅firefox 识别*/
* +html .bb{background-color:#a200ff;}/* 仅IE7 识别 */

/*一个用于展示的class为bb的div标签*/
<div class="bb"></div>

这是基于它们的内核webkit来识别的，用法为@media screen and (-webkit-min-device-pixel-ratio:0)，这个在用语谷歌浏览器不支持字体小于12PX的时候比较实用，还有就是使用SVG或是不可控的图形，也可以用到此方法。我先前做了个倒计时的效果。比如：

QQ图片20161123100644.png

这个在PC是没什么问题的，由于我这个页面是响应式的，需要在手机里也清晰显示，就得等比例缩小才可以，如是就用到@media screen and (-webkit-min-device-pixel-ratio:0)这个方法了。

OK，常用浏览器的CSS Hack 属性前缀法就是这些内容了，接下来我们看下“条件注释法”。

2、条件注释法

条件注释法是比较简单的，就是针对在不同IE浏览器下执行不同的CSS代码，主要是针对IE，看下代码：

<!--[if IE 6]> 
<![endif]--> 
只有IE6版本可见 
<!--[if lte IE 6]> 
<![endif]--> 
IE6及其以下版本可见 
<!--[if gte IE 6]> 
<![endif]--> 
IE6及其以上版本可见 
<!--[if IE 7]> 
<![endif]--> 
只有IE7版本可见 
<!--[if lte IE 7]> 
<![endif]--> 
IE7及其以下版本可见 
<!--[if gte IE 7]> 
<![endif]--> 
IE7及其以上的版本可见 
<!--[if IE 8]> 
<![endif]--> 
只有IE8版本可见 
<!--[if lte IE 8]> 
<![endif]--> 
IE8及其以下的版本可见 
<!--[if gte IE 8]> 
<![endif]--> 
IE8及其以上的版本可见 
<![if !IE]> 
<![endif]> 
除了IE以外的版本

当然这个也可以用JS写，如下：

<script type="text/javascript"> 
var browser=navigator.appName 
var b_version=navigator.appVersion 
var version=b_version.split(";"); 
var trim_Version=version[1].replace(/[ ]/g,""); 
if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE6.0") 
{ 
alert("IE 6.0"); 
} 
else if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE7.0") 
{ 
alert("IE 7.0"); window.location.href="http://xxxx.com";
} 
else if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE8.0") 
{ 
alert("IE 8.0"); 
} 
else if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE9.0") 
{ 
alert("IE 9.0"); 
} 
else if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE10.0") 
{ 
alert("IE 10.0"); 
} 
else if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE11.0") 
{ 
alert("IE 11.0"); 
} 
</script>

在平时的项目中，我在做动画的时候用得最多，由于需要支持IE7+浏览器，但是也要完美显示，所以需要针对IE7/8最特殊处理，这个比较简单，这里就不啰嗦了。

3、选择器前缀法

选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在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的一些选择器，如html:first-child，body:nth-of-type(1)，衍生出更多的hack方式，具体的可以参考下表：

OK，三种方法基本就谈到这里，如有好的想法可以留言给昂们。

总结

一般情况下，我们尽量避免使用CSS hack，但是有些情况为了顾及用户体验实现向下兼容，不得已才使用hack。使用hack虽然对页面表现的一致性有好处，但过多的滥用会造成html文档混乱不堪，增加管理和维护的负担。相信只要大家一起努力，少用、慎用hack，未来一定会促使浏览器厂商的标准越来越趋于统一，顺利过渡到标准浏览器的主流时代。抛弃那些陈旧的IE hack，必将减轻我们编码的复杂度，少做无用功。

赏您的支持是我们创作的动力！