[ 戰勝兼容性的葵花寶典 ] 史上最全的css hack（ie6-9,firefox,chrome,opera,safari) 寫法

時間 2019-11-12

標籤戰勝兼容性葵花寶典史上 css hack ie6 firefox chrome opera safari 寫法欄目 CSS 简体版

原文原文鏈接

在這個瀏覽器百花爭鳴的時代，做爲前端開發的咱們爲了咱們漂亮的設計能適應各個瀏覽器可爲煞費苦心，主要體如今javascript和css上面。javascript我此次就不談了，先說說css。javascript

爲了適應不一樣瀏覽器不一樣的版本（版本主要就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>

分析:css

上面這段代碼你們能夠直接copy出來，保存成html在各瀏覽器試試。下面我來分析下：html

各個瀏覽器都認識，這裏給firefox用；

background-color:red\9;\9全部的ie瀏覽器可識別；

\0 是留給ie8的，但筆者測試，發現最新版opera也認識，汗。。。不過且慢，後面自有hack寫了給opera認的，因此，\0咱們就認爲是給ie8留的；

+background-color:pink; + ie7定了；

_ _專門留給神奇的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 {} } 這個是總是跟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最好是按照標準來，這樣對咱們之後維護也是大有好處的，實在不行再用