CSS hack

之前一直很狭隘的对CSS hack持有偏见，觉得写得规范的代码不应该使用这些“邪门歪道”，可最近产品发布一个小问题却让我头疼了很久，最后查了一下资料，竟然使用CSS hack轻松解决了，不得不服啊，对付神奇的IE就得使用这些利器。

什么是CSS hack

由于不同的浏览器，甚至同一浏览器的不同版本对CSS的解析认识不一样，导致生成的页面效果不一致，写出针对不同浏览器CSS code就称为CSS hack。

常用的CSS hack 有三种方式，CSS 内部hack、选择器hack、HTML 头部引用，其中第一种最常用。

CSS 内部hack

正经的CSS是这么写的

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>Test</title>
 5         <style type="text/css" >
 6             .test
 7             {
 8                 background-color:green;
 9             }
10         </style>
11     </head>
12     <body>
13         <div class="test" style="height:100px; 100px; line-height:100px; margin:50px; border:1px solid #000;"></div>
14     </body>
15 <html>

这样的代码对于所有当前常用的浏览器都是好使的，结果应该是这样子的

但是在CSS3中常见一些这样的写法

 1 /*Mozilla内核浏览器：firefox3.5+*/
 2   -moz-transform: rotate | scale | skew | translate ;
 3  /*Webkit内核浏览器：Safari and Chrome*/
 4   -webkit-transform: rotate | scale | skew | translate ;
 5  /*Opera*/
 6   -o-transform: rotate | scale | skew | translate ;
 7  /*IE9*/
 8   -ms-transform: rotate | scale | skew | translate ;
 9  /*W3C标准*/
10   transform: rotate | scale | skew | translate ;

如果没有注释乍一看还以为逆天了，这样的代码都好使！这样的代码确实好使，CSS3目前标准还没有统一，各个浏览器都有自己的表现方式，甚至有的实现，有的未实现，在前面加一些前缀以表示支持某个特定浏览器，这也是CSS 内部hack的基本原理，向上面这些简单易懂，但是真正的CSS hack 远远不止于此，因为有不死的IE6及其各种奇葩的兄弟版本。

CSS 内部hack 语法是这样的 selector{<hack>?property:value<hack>?;} ，上面代码所示的是在属性名称之前的hack，当然还有这样的