史上最全的css hack(ie6-9,firefox,chrome,opera,safari)

   在這個瀏覽器百花爭鳴的時代,作爲前端開發的我們爲了我們漂亮的設計能適應各個瀏覽器可爲煞費苦心,主要體現在javascript和css上面。javascript我這次就不談了,先說說css。
      爲了適應不同瀏覽器不同的版本(版本主要就ie來說),ie這朵奇葩現在我們要兼容6-9,它的10也快出來了。。。在ie下我們可以寫條件註釋來區分ie和其他瀏覽器,以及ie的版本,這些請大家自行google。這篇文章主要討論的是css hack。下面廢話補多說了,直接上代碼
複製代碼
<!DOCTYPE html>  
<html>  
<head>  
    
<title>Css Hack</title>  
    
<style>  
    #test   
    
{   
        width
:300px;   
        height
:300px;   
          
        background-color
:blue;      /*firefox*/
        background-color
:red\9;      /*all ie*/
        background-color
:yellow\0;    /*ie8*/
        +background-color
:pink;        /*ie7*/
        _background-color
:orange;       /*ie6*/
    
}  
    :root #test 
{ background-color:purple\9; }  /*ie9*/
    @media all and (min-width:0px)
{ #test {background-color:black\0;} }  /*opera*/
    @media screen and (-webkit-min-device-pixel-ratio:0)
{ #test {background-color:gray;} }  /*chrome and safari*/
    
</style>  
</head>  
<body>  
    
<div id="test">test</div>  
</body>  
</html> 
複製代碼
      上面這段代碼大家可以直接copy出來,保存成html在各瀏覽器試試。下面我來分析下:
    background-color:blue; 各個瀏覽器都認識,這裏給firefox用;
    background-color:red\9;\9所有的ie瀏覽器可識別;
    background-color:yellow\0; \0 是留給ie8的,但筆者測試,發現最新版opera也認識,汗。。。不過且慢,後面自有hack寫了給opera認的,所以,\0我們就認爲是給ie8留的;
    +background-color:pink; + ie7定了;
    _background-color:orange; _專門留給神奇的ie6;
    :root #test { background-color:purple\9; } :root是給ie9的,網上流傳了個版本是 :root #test { background-color:purple\0;},呃。。。這個。。。,新版opera也認識,所以經筆者反覆驗證最終ie9特有的爲:root 選擇符 {屬性\9;}
    @media all and (min-width:0px){ #test {background-color:black\0;} } 這個是老是跟ie搶着認\0的神奇的opera,必須加個\0,不然firefox,chrome,safari也都認識。。。
    @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最後這個是瀏覽器新貴chrome和safari的。

    好了就這麼多了,特別注意以上順序是不可以改變的。css hack雖然可以解決個瀏覽器之間css顯示的差異問題,但是畢竟不符合W3C規範,我們平時寫css最好是按照標準來,這樣對我們以後維護也是大有好處的,實在不行再用。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章