CSS中相容的一面-----Hack

CSS中相容的一面-----Hack技術大全相容範圍：IE:6.0+，FireFox:2.0+，Opera 10.0+，Sarari 3.0+，Chrome參考資料：各遊覽器常用相容標記一覽表:標記IE6IE7IE8FFOperaSarari[*+><]    √    √    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。）執行個體講解：Hack應用情境（一）適用範圍：IE:6.0,IE7.0,IE8.0之間的相容執行個體說明：此例中我們使用了漸進識別的方式，從總體中逐漸排除局部。首先，巧妙的使用“\9”這一標記，將IE遊覽器從所有情況中分離出來。接著，再次使用“+”將IE8和IE7、IE6分離開來，此時，我們的IE8已經獨立識別。執行個體代碼：.bb{height:32px;/*所有識別*/. /*IE6、7、8識別*/+/*IE6、7識別*/_/*IE6識別*/}/*一個用於展示的class為bb的div標籤*/< div class ="bb"> Hack應用情境（二）適用範圍：IE:6.0,IE7.0,IE8.0,Firefox之間的相容執行個體說明：大家很容易的可以看出這是情境（一）的加強版，適用於更廣泛的環境。其實情境（一）中也已經做到了把Firefox與IE遊覽器區分開來了，現在我們要做的是把Firefox從其它遊覽器中再次識別出來。大家仔細看下代碼，大家會發現其實遊覽器識別是很簡單的。Firefox如何識別？對了，IE中對偽類支援不廣泛，所以偽類是個不錯的途徑。(.yourClass,x:-moz-any-link, x:default)注意，這個區分偽類往往IE7也能識別，所以最好還需要把IE7單獨識別出來，且此方法對ff3.6 已無效，firefox的區分可以使用@-moz-document url-prefix(){}執行個體代碼：.bb{height:32px;/*所有識別*/ /*IE6、7、8識別*/+/*IE6、7識別*/_/*IE6識別*/}.bb, x:-moz-any-link, x:default{}/*IE7 firefox3.5及以下 識別 */ @-moz-document url-prefix(){.bb{}}/* 僅firefox 識別 */ * +html .bb{}/* 僅IE7 識別 *//*一個用於展示的class為bb的div標籤*/< div class ="bb"> 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;/*所有識別*/ /*IE6、7、8識別*/+/*IE6、7識別*/_/*IE6識別*/}@media screen and (-webkit-min-device-pixel-ratio:0){.bb{/*safari(Chrome) 有效 */.bb, x:-moz-any-link, x:default{}/*IE7 firefox3.5及以下 識別 */ @-moz-document url-prefix(){.bb{}}/*僅firefox 識別*/ * +html .bb{}/* 僅IE7 識別 *//*一個用於展示的class為bb的div標籤*/< div class ="bb"> Hack應用情境（四）適用範圍：IE:6.0+，FireFox:2.0+，Opera 10.0+，Sarari 3.0+，Chrome全相容 執行個體說明：執行個體的具體代碼在下面執行個體代碼中已經列出，具體效果如此頁面的頂端部分效果，您可以通過不同遊覽器檢測該效果。這次我們基本把所有的主流遊覽器都相容了，大家來看下代碼。Opera的識別有一部分歸功於“\0”標記，這個標記只被IE8和Opera識別，特殊的標記往往造就的是我們更廣泛的hack手段。下例的代碼比較完整，大家可以選擇參考。執行個體代碼：
 

  

   

    
IE6
    

    
IE7
    

    
IE8
    

    
Firefox
    

    
Opera
    

    
Safari(Chrome)
    

   
   

    
IE6
    

    
IE7
    

    
IE8
    

    
Firefox
    

    
Opera
    

    
Safari(Chrome)
    

   
  
 
Opera的辨別色是深綠色，Opera遊覽器很時髦麼。Firefox的辨別色是淺綠色，Firefox是很強大的遊覽器。Safari和Chrome的辨別色是金黃色，Safari和Chrome使用的都是Webkit核心

