溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下什么是CSS hack，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
什么是CSS hack
CSS hack由于不同的瀏覽器，比如IE6,IE7,Firefox等，對CSS的解析認識不一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。
CSS hack分類
hack主要分為CSS選擇器hack、CSS屬性hack、IE條件注釋hack。
CSS選擇器hack：比如 IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}等。
CSS屬性hack：比如 IE6能識別下劃線"_"和星號" * "，IE7能識別星號" * "，但不能識別下劃線"_"，而firefox兩個都不能認識等。
IE條件注釋hack：
針對所有IE：<!--[if IE]><!--您的代碼--><![endif]-->
針對IE6及以下版本：<!--[if lt IE 7]><!--您的代碼--><![endif]-->
這類Hack不僅對CSS生效，對寫在判斷語句里面的所有代碼都會生效。
書寫順序，一般是將識別能力強的瀏覽器的CSS寫在前面。
用法
比如要分辨IE6和firefox兩種瀏覽器，可以這樣寫：
div{
background:green; /* for firefox */
*background:red; /* for IE6 */ (both IE6 && IE7)
}可以看到在IE6中看到是紅色的，在firefox中看到是綠色的。
在firefox中，它是識別不了后面的那個帶星號的東西是什么的，于是將它過濾掉，解析得到的結果是:div{background:green},于是理所當然這個div的背景是綠色的。
在IE6中，它兩個background都能識別出來，它解析得到的結果是:div{background:green;background:red;},于是根據優先級別，處在后面的red的優先級高，于是當然這個div的背景顏色就是紅色的了。
瀏覽器識別
<!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在各瀏覽器試試。分析：
（1）background-color:blue; 各個瀏覽器都認識，這里給firefox用；
（2）background-color:red\9; \9所有的ie瀏覽器可識別；
（3）background-color:yellow\0; \0 是留給ie8的，但筆者測試，發現最新版opera也認識，汗。。。不過且慢，后面自有hack寫了給opera認的，所以，\0我們就認為是給ie8留的；
（4）+background-color:pink; + ie7定了；
（5）_background-color:orange; _專門留給神奇的ie6；
（6）:root #test { background-color:purple\9; } :root是給ie9的，網上流傳了個版本是 :root #test { background-color:purple\0;}，新版opera也認識，所以經筆者反復驗證最終ie9特有的為:root 選擇符 {屬性\9;}
（7）@media all and (min-width:0px){ #test {background-color:black\0;} } 這個是老是跟ie搶著認\0的神奇的opera，必須加個\0,不然firefox，chrome，safari也都認識。。。
（8）@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后這個是瀏覽器新貴chrome和safari的。
看完了這篇文章，相信你對“什么是CSS hack”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
