css中經常使用的hack

時間 2019-12-09

標籤 css 中經常使用的 hack 欄目 CSS 简体版

原文原文鏈接

<!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>

以上代碼分析：css

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最好是按照標準來，這樣對我