每个开发者都应该知道的 7 个 CSS Hack

了解什么是CSS Hack

CSS Hack是一些针对特定的浏览器或者设备而产生的特殊CSS样式。CSS Hack的主要目的是为了解决不同浏览器之间的兼容性问题，其实质就是利用CSS的BUG去实现某些特定的效果。

虽然CSS Hack能在某些情况下解决浏览器兼容问题，但是这些Hack技巧都是一些措施的例外，使用Hack技巧虽然能够解决兼容问题，但是代码可读性差、代码冗长、代码维护的成本高都是其存在的问题。

为什么需要使用CSS Hack

在web开发工作中，因为浏览器不同，在展示页面时经常出现百奇百怪的问题，比如布局的错乱、字体的不一致等。解决这些问题，就需要编写浏览器兼容的CSS代码，通常CSS Hack就是解决这些问题的办法。

7个CSS Hack介绍

1.星号Hack

星号Hack主要是针对IE6、IE7和IE8（IE6~IE9版本）的浏览器，用于修复该类浏览器的一系列CSS问题。

/* IE6/7/8 兼容写法 */ 

*color:#fff; 
*+background:#000000; 
/* IE7/8 兼容写法 */ 
*:first-child+html .class{margin-top:0;} 

2.下划线Hack

下划线Hack是用来针对IE6和IE7（注意是不包括IE8和IE9版本）浏览器比较常用的hack方式，通常用来处理IE6中标题下划线的问题。

/*IE6 兼容写法 */  

.class{  
     _width:100px;  
} 

3.斜杆Hack

斜杆Hack使用斜杠"/"加浏览器关键字可以区分不同版本IE的CSS规则，比较适合用来解决IE下特殊元素的样式问题。

 /* IE6/7 */

.class{
        padding-left:20px;
        padding:0\9;
}
 /* IE8/9 */
.class{
        background-color:#f00\9;
}

4.叹号Hack

叹号Hack针对IE6和IE7等老旧浏览器进行CSS样式的区别处理。

/* IE6/7 */ 

.class{ 
       height:100px !important/*所有高度*/; 
       height:auto !important/*图片高度*/; 
    }

5.触发IE6 CSS Hack方法

在IE6下，CSS Hack不需要特定的写法即可触发，这其实是一个BUG。下面是一个触发IE6 Hack的示例。

/* IE6 */

* html .class{ 
       height:100px; /*IE6专有写法*/ 
}

6.声明!important

在CSS中，!important声明优先级最高，可以覆盖其他已经声明的样式。

/*类下面所有div元素的颜色为黑色*/ 

.class div{ 
       color:#000;
}
/*特殊情况下,该div字体颜色为蓝色*/ 
.class .special{ 
       color:#00f !important; 
} 

7.针对Firefox 的Hack方法

仅适用于早先的Firefox版本(火狐3.0以下）

/* 火狐firefox */ 

@-moz-document url-prefix(){ 
    .wrapper{
           padding:30px 0px 0px 0px；
      }
}

总结

CSS Hack虽然能够解决浏览器兼容问题，但是在选择上，要谨慎些，充分考虑其在扩展性、维护性、代码复杂度等方面的影响，避免过多的使用会对代码的可读性造成影响。