不管是前端後端，只要做網頁就難免要做相容，下面的css hack是我搜集了網上所有資料的集合，也是最全面的css相容。

!important

網上很多資料中常常把!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。）
例項講解：

Hack應用情境（一）

適用範圍：IE:6.0,IE7.0,IE8.0之間的相容

例項說明：
此例中我們使用了漸進識別的方式，從總體中逐漸排除區域性。首先，巧妙的使用“\9”這一標記，將IE遊覽器從所有情況中分離出來。接著，再次使用“+”將IE8和IE7、IE6分離開來，此時，我們的IE8已經獨立識別。

例項程式碼：

.bb{
    height:32px;
    background-color:#f1ee18;/*所有識別*/
    .background-color:#00deff\9; /*IE6、7、8識別*/
    +background-color:#a200ff;/*IE6、7識別*/
 

    _background-color:#1e0bd1;/*IE6識別*/
}

一個用於展示的class為bb的div標籤

< div class ="bb"></ div >

Hack應用情境（二）

適用範圍：IE:6.0,IE7.0,IE8.0,Firefox之間的相容

例項說明：
大家很容易的可以看出這是情境（一）的加強版，適用於更廣泛的環境。其實情境（一）中也已經做到了把火狐與IE遊覽器區分開來了，現在我們要做的是把火狐從其它遊覽器中再次識別出來。大家仔細看下程式碼，大家會發現其實遊覽器識別是很簡單的。火狐如何識別？對了，IE中對偽類支援不廣泛，所以偽類是個不錯的途徑。(.yourClass,x:-moz-any-link, x:default)注意，這個區分偽類往往IE7也能識別，所以最好還需要把IE7單獨識別出來，且此方法對ff3.6 已無效，firefox的區分可以使用@-moz-document url-prefix(){}

例項程式碼：

.bb{
    height:32px;
    background-color:#f1ee18;/*所有識別*/
    background-color:#00deff\9; /*IE6、7、8識別*/
    +background-color:#a200ff;/*IE6、7識別*/
    _background-color:#1e0bd1;/*IE6識別*/
}
/*IE7 firefox3.5及以下 識別 */
.bb, x:-moz-any-link, x:default{
    background-color:#00ff00;
}
/* 僅firefox 識別 */
@-moz-document url-prefix(){
    .bb{
        background-color:#00ff00;
    }
}
/* 僅IE7 識別 */
+html .bb{
    background-color:#a200ff;
}

一個用於展示的class為bb的div標籤

< div class ="bb"></ div >

Hack應用情境（三）

適用範圍：IE:6.0,IE7.0,IE8.0,Firefox,Safari(Chrome)之間的相容

例項說明：
我們現在將再次對我們的CSS進行加強了，使其能識別Safari(Chrome)遊覽器。這是基於它們的核心webkit來識別的，用法為@media screen and (-webkit-min-device-pixel-ratio:0)

例項程式碼：

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

一個用於展示的class為bb的div標籤

< div class ="bb"></ div >

條件註釋判斷瀏覽器

適用範圍：IE


<!--[if IE]>所有的IE可識別<![endif]-->
<!--[if !IE]> NOT運算子。這是擺立即在前面的功能，操作員，或子表示式扭轉布林表示式的意義。 <![endif]-->

<!--[if IE 6]> 小於運算子。如果第一個引數小於第二個引數，則返回true。<![endif]-->

<!--[if lt IE 7]> IE7以及IE7以下版本可識別 <![endif]-->
<!--[if lte IE 7]> 小於或等於運算。如果第一個引數是小於或等於第二個引數，則返回true。 <![endif]-->


<!--[if gte IE 6]> 大於或等於運算。如果第一個引數是大於或等於第二個引數，則返回true。<![endif]-->

<!--[if (gt IE 5)&(lt IE 7)]> AND運算子。如果所有的子表示式計算結果為true，返回true <![endif]-->


<!--[if (IE 6)|(IE 7)]> OR運算子。返回true，如果子表示式計算結果為true。 <![endif]-->

<!--[if lt IE 9]>
載入CSS1(可以把要重寫的寫在這裡).
<![endif]-->