CSS 駭客

之前一直很狹隘的對CSS hack持有偏見，覺得寫得規範的代碼不應該使用這些“邪門歪道”，可最近產品發布一個小問題卻讓我頭疼了很久，最後查了一下資料，竟然使用CSS hack輕鬆解決了，不得不服啊，對付神奇的IE就得使用這些利器。

什麼是CSS hack

由於不同的瀏覽器，甚至同一瀏覽器的不同版本對CSS的解析認識不一樣，導致生成的頁面效果不一致，寫出針對不同瀏覽器CSS code就稱為CSS hack。

常用的CSS hack 有三種方式，CSS 內部hack、選擇器hack、HTML 頭部引用，其中第一種最常用。

CSS 內部hack

正經的CSS是這麼寫的

nbsp;html>
    
        <title>Test</title>
        <style>
            .test            {
                background-color:green;
            }
        </style>
    
    
        <p></p>
    

這樣的程式碼對於所有目前常用的瀏覽器都是好使的，結果應該是這樣子的

中常見一些這樣的寫法

/*Mozilla内核浏览器：firefox3.5+*/
  -moz-transform: rotate | scale | skew | translate ; /*Webkit内核浏览器：Safari and Chrome*/
  -webkit-transform: rotate | scale | skew | translate ; /*Opera*/
  -o-transform: rotate | scale | skew | translate ; /*IE9*/
  -ms-transform: rotate | scale | skew | translate ; /*W3C标准*/
  transform: rotate | scale | skew | translate ;

如果沒有註解乍一看還以為逆天了，這樣的程式碼都好使！這樣的程式碼確實好使，CSS3目前標準還沒有統一，各個瀏覽器都有自己的表現方式，甚至有的實現，有的未實現，在前面加一些前綴以表示支持某個特定瀏覽器，這也是CSS 內部hack的基本原理，向上面這些簡單易懂，但真正的CSS hack 遠遠不止於此，因為有不死的IE6及其各種奇葩的兄弟版本。

CSS 內部hack 語法是這樣的selector{?property:value?;} ，上面程式碼所示的是在屬性名稱之前的hack，當然還有這樣的

*background-color:green;

屬性前面加個「*」這樣的寫法只會對IE6、7生效，其它版本IE及現代瀏覽器會忽略這條指令（沒有特殊說明，本文所有hack都是指在聲明了DOCTYPE的文檔的效果）

-background-color:green;

屬性前面有個「-」這樣的只有IE6識別，還有些在後面的hack

background-color:green!important;

這樣在屬性值後面添加「!important」的寫法只有IE6IE及現代瀏覽器都可以識別，還有“+”、“

	IE6	IE7	IE8	IE9	IE10	现代浏览器
*
+
-
!important
\9
\0
\9\0

这样就清楚多了吧。如果只想给上面的test p在IE访问的时候加绿色背景，就可以这么写

background-color:green\9;

如果想IE6红色，IE7绿色，其它黄色（当然没人这么无聊）就可以这么写

background-color:green;
+background-color:green;
_background-color:green;

选择器hack

选择器hanck主要是针对IE浏览器，其实并不怎么常用，语法是这样的： selector{ sRules }

	IE6	IE7	IE8	IE9	IE10	现代浏览器
*html
*+html
:root

针对IE9的hack可以这么写

:root .test{
    background-color:green;
}

HTML头部引用

HTML头部引用就比较特殊了，类似于程序语句，只能使用在HTML文件里，而不能在CSS文件中使用，并且只有在IE浏览器下才能执行，这个代码在非IE浏览下非单不是执行该条件下的定义，而是当做注释视而不见。

<link><link><link>

lte：就是Less than or equal to的简写，也就是小于或等于的意思。

lt ：就是Less than的简写，也就是小于的意思。

gte：就是Greater than or equal to的简写，也就是大于或等于的意思。

gt ：就是Greater than的简写，也就是大于的意思。

! ：就是不等于的意思，跟javascript里的不等于判断符相同。

书写顺序

看看，看看，这么多姿势，那么一个效果，好多种写法，什么顺序写才能保证各个浏览器都得到希望的效果呢？因为CSS只要是同一级别，出现重复属性设置，后出现的会覆盖前面出现的，所以在书写的时候一般把识别能力强的写前面，看个例子

_background-color:red;
background-color:green;

如果希望p在IE6上是红色，其它是绿色，上面的写法可不可以呢？试一下发现所有浏览器上都是绿色，因为在IE6解析的时候，第一句能够识别，背景设为红色，但是第二句所有浏览器都识别，IE6也不例外，背景颜色又被设为绿色，所以得反过来写

background-color:green;
_background-color:red;

总结出的规律就是：先一般，再特殊。有兴趣的同学可以试试试试下面CSS，看看和你想的效果是否一样

background-color:blue; /*所有浏览器*/background-color:red\9;/*所有的ie*/background-color:yellow\0; /* ie8+*/+background-color:pink; /*+ ie7*/

更多CSS hack 相关文章请关注PHP中文网！