溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“CSS hack的知識有哪些”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“CSS hack的知識有哪些”文章能幫助大家解決問題。
什么是CSShack
CSShack由于不同的瀏覽器，比如IE6,IE7,Firefox等，對CSS的解析認識不一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。
CSShack分類
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：<!--[ifIE]><!--您的代碼--><![endif]-->
針對IE6及以下版本：<!--[ifltIE7]><!--您的代碼--><![endif]-->
這類Hack不僅對CSS生效，對寫在判斷語句里面的所有代碼都會生效。
書寫順序，一般是將識別能力強的瀏覽器的CSS寫在前面。
用法
比如要分辨IE6和firefox兩種瀏覽器，可以這樣寫：
div{
background:green;/*forfirefox*/
*background:red;/*forIE6*/(bothIE6&&IE7)
}
可以看到在IE6中看到是紅色的，在firefox中看到是綠色的。
在firefox中，它是識別不了后面的那個帶星號的東西是什么的，于是將它過濾掉，解析得到的結果是:div{background:green},于是理所當然這個div的背景是綠色的。
在IE6中，它兩個background都能識別出來，它解析得到的結果是:div{background:green;background:red;},于是根據優先級別，處在后面的red的優先級高，于是當然這個div的背景顏色就是紅色的了。
瀏覽器識別
<!DOCTYPEhtml>
<html>
<head>
<title>CssHack</title>
<style>
#test
{
width:300px;
height:300px;
background-color:blue;/*firefox*/
background-color:red\9;/*allie*/
background-color:yellow\0;/*ie8*/
+background-color:pink;/*ie7*/
_background-color:orange;/*ie6*/
}
:root#test{background-color:purple\9;}/*ie9*/
@mediaalland(min-width:0px){#test{background-color:black\0;}}/*opera*/
@mediascreenand(-webkit-min-device-pixel-ratio:0){#test{background-color:gray;}}/*chromeandsafari*/
</style>
</head>
<body>
<divid="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）@mediaalland(min-width:0px){#test{background-color:black\0;}}這個是老是跟ie搶著認\0的神奇的opera，必須加個\0,不然firefox，chrome，safari也都認識。。。
（8）@mediascreenand(-webkit-min-device-pixel-ratio:0){#test{background-color:gray;}}最后這個是瀏覽器新貴chrome和safari的。
關于“CSS hack的知識有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
