爲了適應不同瀏覽器不同的版本(版本主要就ie來說),ie這朵奇葩現在我們要兼容6-9,它的10也快出來了。。。在ie下我們可以寫條件註釋來區分ie和其他瀏覽器,以及ie的版本,這些請大家自行google。這篇文章主要討論的是css hack。下面廢話補多說了,直接上代碼
DOCTYPE html>
<</SPAN>html>
<</SPAN>head>
<</SPAN>title>Css Hack</</SPAN>title>
<</SPAN>style>
#test
{
width:300px;
height:300px;
background-color:blue;
background-color:red\9;
background-color:yellow\0;
+background-color:pink;
_background-color:orange;
}
:root #test { background-color:purple\9; }
@media all and (min-width:0px){ #test {background-color:black\0;} }
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }
</</SPAN>style>
</</SPAN>head>
<</SPAN>body>
<</SPAN>div id="test">test</</SPAN>div>
</</SPAN>body>
</</SPAN>html>
<</SPAN>html>
<</SPAN>head>
<</SPAN>title>Css Hack</</SPAN>title>
<</SPAN>style>
#test
{
width:300px;
height:300px;
background-color:blue;
background-color:red\9;
background-color:yellow\0;
+background-color:pink;
_background-color:orange;
}
:root #test { background-color:purple\9; }
@media all and (min-width:0px){ #test {background-color:black\0;} }
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }
</</SPAN>style>
</</SPAN>head>
<</SPAN>body>
<</SPAN>div id="test">test</</SPAN>div>
</</SPAN>body>
</</SPAN>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的。