這篇文章主要介紹“CSS hack的知識(shí)有哪些”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“CSS hack的知識(shí)有哪些”文章能幫助大家解決問(wèn)題。
網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)公司！專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、小程序設(shè)計(jì)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了華容免費(fèi)建站歡迎大家使用！
什么是CSShack
CSShack由于不同的瀏覽器，比如IE6,IE7,Firefox等，對(duì)CSS的解析認(rèn)識(shí)不一樣，因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣，得不到我們所需要的頁(yè)面效果。這個(gè)時(shí)候我們就需要針對(duì)不同的瀏覽器去寫(xiě)不同的CSS，讓它能夠同時(shí)兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果。
CSShack分類(lèi)
hack主要分為CSS選擇器hack、CSS屬性hack、IE條件注釋hack。
CSS選擇器hack：比如IE6能識(shí)別*html.class{}，IE7能識(shí)別*+html.class{}或者*:first-child+html.class{}等。
CSS屬性hack：比如IE6能識(shí)別下劃線"_"和星號(hào)"*"，IE7能識(shí)別星號(hào)"*"，但不能識(shí)別下劃線"_"，而firefox兩個(gè)都不能認(rèn)識(shí)等。
IE條件注釋hack：
針對(duì)所有IE：
針對(duì)IE6及以下版本：
這類(lèi)Hack不僅對(duì)CSS生效，對(duì)寫(xiě)在判斷語(yǔ)句里面的所有代碼都會(huì)生效。
書(shū)寫(xiě)順序，一般是將識(shí)別能力強(qiáng)的瀏覽器的CSS寫(xiě)在前面。
用法
比如要分辨IE6和firefox兩種瀏覽器，可以這樣寫(xiě)：
div{
background:green;/*forfirefox*/
*background:red;/*forIE6*/(bothIE6&&IE7)
}
可以看到在IE6中看到是紅色的，在firefox中看到是綠色的。
在firefox中，它是識(shí)別不了后面的那個(gè)帶星號(hào)的東西是什么的，于是將它過(guò)濾掉，解析得到的結(jié)果是:div{background:green},于是理所當(dāng)然這個(gè)div的背景是綠色的。
在IE6中，它兩個(gè)background都能識(shí)別出來(lái)，它解析得到的結(jié)果是:div{background:green;background:red;},于是根據(jù)優(yōu)先級(jí)別，處在后面的red的優(yōu)先級(jí)高，于是當(dāng)然這個(gè)div的背景顏色就是紅色的了。
瀏覽器識(shí)別
上面這段代碼大家可以直接copy出來(lái)，保存成html在各瀏覽器試試。分析：
（1）background-color:blue;各個(gè)瀏覽器都認(rèn)識(shí)，這里給firefox用；
（2）background-color:red\9;\9所有的ie瀏覽器可識(shí)別；
（3）background-color:yellow\0;\0是留給ie8的，但筆者測(cè)試，發(fā)現(xiàn)最新版opera也認(rèn)識(shí)，汗。。。不過(guò)且慢，后面自有hack寫(xiě)了給opera認(rèn)的，所以，\0我們就認(rèn)為是給ie8留的；
（4）+background-color:pink;+ie7定了；
（5）_background-color:orange;_專(zhuān)門(mén)留給神奇的ie6；
（6）:root#test{background-color:purple\9;}:root是給ie9的，網(wǎng)上流傳了個(gè)版本是:root#test{background-color:purple\0;}，新版opera也認(rèn)識(shí)，所以經(jīng)筆者反復(fù)驗(yàn)證最終ie9特有的為:root選擇符{屬性\9;}
（7）@mediaalland(min-width:0px){#test{background-color:black\0;}}這個(gè)是老是跟ie搶著認(rèn)\0的神奇的opera，必須加個(gè)\0,不然firefox，chrome，safari也都認(rèn)識(shí)。。。
（8）@mediascreenand(-webkit-min-device-pixel-ratio:0){#test{background-color:gray;}}最后這個(gè)是瀏覽器新貴chrome和safari的。
關(guān)于“CSS hack的知識(shí)有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
重慶分公司
重慶分公司
