淺談各種瀏覽器下的CSS Hack兼容性寫(xiě)法
我要評(píng)論由于不同瀏覽器所遵循的標(biāo)準(zhǔn)也有所不同，再加上不可避免的程序bug、經(jīng)濟(jì)利益等因素的干擾。同樣的網(wǎng)頁(yè)代碼(HTML + CSS)，在不同瀏覽器上的顯示效果卻略有不同，甚至大有不同。即使是同一個(gè)瀏覽器，其不同版本的顯示效果也有所不同，尤其是IE。這就給網(wǎng)頁(yè)前端設(shè)計(jì)人員帶來(lái)了很大的困擾。開(kāi)發(fā)人員必須兼顧考慮到所有主流的瀏覽器，才能在不同的瀏覽器上顯示出相同或滿足需要的效果。于是CSS Hack技術(shù)就誕生了。
CSS Hack技術(shù)，就是利用不同瀏覽器不同版本之間的CSS實(shí)現(xiàn)的特性差異，來(lái)滿足我們需要的效果：在所有主流瀏覽器上顯示統(tǒng)一的效果，或者為特定瀏覽器顯示特定的效果。
眾所周知，如果在一個(gè)css樣式選擇器中存在兩個(gè)名稱(chēng)相同的屬性，瀏覽器一般會(huì)以最后面的屬性為準(zhǔn)。
- <style type="text/css">
- .css-hack {
- background-color: red;
- background-color: blue; /* 最終背景色顯示為藍(lán)色 */
- }
- </style>
- <div class="css-hack">CodePlayer</div>
當(dāng)然，這里有個(gè)前提，那就是瀏覽器首先得能夠識(shí)別并支持該css屬性，對(duì)于瀏覽器不支持的css屬性或值，瀏覽器將一律將其忽略。
這就是CSS Hack技術(shù)的實(shí)現(xiàn)原理。例如：即使我們?cè)趯傩悦Q(chēng)前面加上一個(gè)下劃線_，IE 6 照樣可以識(shí)別該屬性，而且只有IE 6可以識(shí)別。因此，我們就可以利用這個(gè)特性，讓IE 6實(shí)現(xiàn)某些特定的效果。
- .css-hack {
- background-color: red; /* 在其他瀏覽器上顯示為紅色 */
- _background-color: blue; /* 在IE 6上顯示為藍(lán)色 */
- }
再者如，由于IE 6不支持max-width屬性，但是IE6的css屬性值支持expression表達(dá)式。因此，我們可以為IE 6 折中實(shí)現(xiàn)max-width的屬性效果。
- .css-hack {
- background-color: red;
- max-width: 200px;
- _width: expression( function(me){ var maxWidth = 200; me.style.width = (me.offsetWidth <= maxWidth ? me.offsetWidth : maxWidth) + "px"; }(this) ); /* _開(kāi)頭只有IE6可以識(shí)別，出于性能考慮，此處的表達(dá)式只會(huì)執(zhí)行一次 */
- }
下面，我們就來(lái)探討IE 6-11、FireFox、Chrome、Safari、Opera等瀏覽器的CSS Hack技術(shù)，以供特定瀏覽器進(jìn)行特定屬性的識(shí)別(國(guó)產(chǎn)瀏覽器一般都使用IE或Chromium內(nèi)核，因此不予考慮)。
備注：以下內(nèi)容多搜集于網(wǎng)絡(luò)(在網(wǎng)絡(luò)上搜集的時(shí)候發(fā)現(xiàn)，網(wǎng)上胡說(shuō)八道的真多……)，并進(jìn)行了親自測(cè)試，以盡量確保準(zhǔn)確無(wú)誤，但由于各種系統(tǒng)平臺(tái)、語(yǔ)言環(huán)境、大版本、小版本等問(wèn)題，筆者并不能保證沒(méi)有任何遺漏或錯(cuò)誤。如果有讀者發(fā)現(xiàn)，敬請(qǐng)留言告知。
IE瀏覽器的CSS Hack
所有的IE瀏覽器的CSS Hack
由于所有的IE瀏覽器都能夠識(shí)別特定的css屬性值后綴\9，因此我們可以給css的屬性值添加\9后綴(在結(jié)尾的分號(hào)之前)，從而做到只有IE瀏覽器能夠識(shí)別該屬性，其他瀏覽器無(wú)法識(shí)別從而將其忽略掉。
- .css-hack {
- background-color: red; /* 其他瀏覽器上顯示為紅色 */
- background-color: blue \9; /* 所有IE瀏覽器上顯示為藍(lán)色 */
- }
IE 6的CSS Hack
毫無(wú)疑問(wèn)，如上所述，為css的屬性前面加下劃線_，這是給IE6專(zhuān)用的。
- .css-hack {
- background-color: red; /* 其他瀏覽器上顯示為紅色 */
- _background-color: blue; /* 只有IE 6瀏覽器上顯示為藍(lán)色 */
- }
IE 7的CSS Hack
IE6、IE7都能夠識(shí)別加了+、*或#前綴的css屬性名稱(chēng)，但是IE 7不支持_前綴，而IE6支持。因此，我們可以先寫(xiě)一個(gè)*屬性、+屬性或#屬性讓IE6、IE7都能識(shí)別，再寫(xiě)一個(gè)_屬性，只讓IE6識(shí)別，將屬性值復(fù)原回去，從而讓前者只對(duì)IE 7生效。
- .css-hack {
- color: red; /* 其他瀏覽器上顯示為紅色 */
- +color: blue; /* 只有 IE 6、IE 7 瀏覽器上顯示為藍(lán)色 */
- _color: red; /* 讓 IE 6 復(fù)原為之前設(shè)置的顏色 */
- }
注意：有些網(wǎng)頁(yè)上說(shuō)，只用+、*或者#號(hào)的屬性前綴就可以只讓IE 7進(jìn)行單獨(dú)識(shí)別。不過(guò)經(jīng)過(guò)本人親測(cè)，不管是用IE Tester，還是專(zhuān)門(mén)下載一個(gè)XP系統(tǒng)，用原版IE 6測(cè)試，都表明：IE6、IE7都可以識(shí)別+、*或#號(hào)的屬性前綴。
另外，還有人說(shuō)，IE 7支持!important，IE 6不支持!important，因此可以通過(guò)*屬性: 值!important;的形式來(lái)實(shí)現(xiàn)IE 7的CSS Hack。
實(shí)際上，這樣也是不行的，因?yàn)镮E 6不是不支持!important，只是有個(gè)bug而已，詳情請(qǐng)參見(jiàn)IE6究竟支不支持!important和IE6 IE7(Q) IE8(Q) 不完全支持!important規(guī)則。
使用!important來(lái)實(shí)現(xiàn)IE 7的CSS Hack，必須是在同一個(gè)樣式選擇器中，而且同樣需要在后面加_屬性來(lái)復(fù)原IE 6的設(shè)置(這種方式還麻煩點(diǎn)，上面的方法還少寫(xiě)個(gè)!important)。
- .css-hack {
- color: red; /* 其他瀏覽器上顯示為紅色 */
- *color: blue !important; /* 只有 IE 6、IE 7 瀏覽器上顯示為藍(lán)色 */
- _color: red; /* 讓 IE 6 復(fù)原為之前設(shè)置的顏色 */
- }
此外，IE 7也支持在選擇器前添加*+html ，讓當(dāng)前選擇器成為*+html的后輩選擇器，只有IE 7可以識(shí)別此類(lèi)樣式選擇器(據(jù)說(shuō)某些舊版本的Opera瀏覽器也能識(shí)別，不過(guò)這些版本早已作古了，無(wú)需考慮)。
- .css-hack {
- color: red; /* 其他瀏覽器顯示紅色 */
- }
- *+html .css-hack {
- color: blue; /* 只有IE 7顯示藍(lán)色 */
- }
IE 7還支持在選擇器前添加*:first-child+html，讓當(dāng)前選擇器成為*:first-child+html的后輩選擇器。
IE 8的CSS Hack
只有IE8支持嵌套如下@media類(lèi)型查詢語(yǔ)句：@media \0screen。
- .css-hack {
- color: red; /* 其他瀏覽器顯示紅色 */
- }
- @media \0screen {
- .css-hack { color: blue; } /* 只有IE 8顯示藍(lán)色 */
- }
IE 9的CSS Hack
沒(méi)找到一個(gè)靠譜的。
IE 10的CSS Hack
沒(méi)找到一個(gè)靠譜的。
IE 11的CSS Hack
沒(méi)找到一個(gè)靠譜的。
IE 6 + IE 7 的CSS Hack
如上所述，只有IE 6、IE 7可以識(shí)別加了+或*號(hào)的屬性前綴。
- .css-hack {
- color: red; /* 其他瀏覽器顯示紅色 */
- *color: blue; /* IE 6、IE 7顯示為藍(lán)色 */
- }
FireFox、Chrome、Safari、Opera的CSS Hack
FireFox的CSS Hack
FireFox支持嵌套其專(zhuān)用的css語(yǔ)句：@-moz-document url-prefix()。
- .css-hack {
- color: red; /* 其他瀏覽器顯示紅色 */
- }
- @-moz-document url-prefix() {
- .css-hack {
- color: blue; /* 只有FireFox顯示為藍(lán)色 */
- }
- }
Chrome、Safari等Webkit內(nèi)核的瀏覽器的CSS Hack
Chrome、Safari等采用webkit內(nèi)核的瀏覽器支持媒體類(lèi)型查詢語(yǔ)句：@media screen and (-webkit-min-device-pixel-ratio:0)。
- .css-hack {
- color: red; /* 其他瀏覽器顯示紅色 */
- }
- @media screen and (-webkit-min-device-pixel-ratio:0) {
- .css-hack {
- color: blue; /* Webkit內(nèi)核瀏覽器顯示藍(lán)色 */
- }
- }
慎用\0的CSS Hack
網(wǎng)上許多與CSS Hack相關(guān)的文章中說(shuō)，在css的屬性值和分號(hào)之間添加字符\0，可以實(shí)現(xiàn)對(duì)IE 8或 IE 9的CSS hack(有的說(shuō)，僅支持IE8)。
網(wǎng)上的示例是這樣的：
- .css-hack {
- color: red; /* 其他瀏覽器顯示紅色 */
- color: blue\0; /* IE8、IE9 顯示藍(lán)色 */
- +color: green; /* IE7 顯示綠色 */
- _color: brown; /* IE6 顯示棕色 */
- }
通過(guò)實(shí)際測(cè)試發(fā)現(xiàn)，關(guān)于使用字符\0實(shí)現(xiàn)的上述CSS Hack有3點(diǎn)需要注意。
1、IE10也能夠識(shí)別添加了字符\0的css屬性值(筆者這里沒(méi)有IE 11，不知道IE 11是否也能識(shí)別)。
2、屬性值和\0之間不能有空格，有一個(gè)空格的話(例如：blue \0)，在IE 8中就失效了，僅對(duì)IE 9/IE 10有效。
3、如果我們只想對(duì)IE 8/IE 9進(jìn)行CSS Hack呢？這個(gè)時(shí)候，我們?nèi)サ艉竺鎯尚信cIE6、IE7有關(guān)的代碼。
- .css-hack {
- color: red; /* 其他瀏覽器顯示紅色 */
- color: blue\0; /* IE8、IE9 顯示藍(lán)色 */
- }
這個(gè)時(shí)候，在IE 6、IE 7瀏覽器中，你會(huì)發(fā)現(xiàn)你看到的不是紅色，而是黑色(也就是默認(rèn)的字體顏色)！
這是因?yàn)橐话銥g覽器的思路是，先過(guò)濾掉無(wú)效的css屬性值，然后再?gòu)恼_的屬性設(shè)置中根據(jù)優(yōu)先級(jí)獲取最后面的css屬性值。而IE 6/7瀏覽器不是先過(guò)濾掉無(wú)效的屬性值，而是先根據(jù)優(yōu)先級(jí)，獲取最后面的css屬性值，然后再來(lái)判斷該屬性值是否，無(wú)效就忽略掉。因此，如果按照網(wǎng)上所說(shuō)，僅僅使用\0來(lái)實(shí)現(xiàn)IE 8+的CSS Hack，則會(huì)對(duì)IE6/7中的顯示效果造成破壞。你必須通過(guò)額外的css屬性設(shè)置來(lái)復(fù)原IE6/7的樣式。
因?yàn)?，我們不能夠?jiǎn)單地下結(jié)論說(shuō)，使用\0可以實(shí)現(xiàn)對(duì)IE 8、IE 9甚至IE 10 +的CSS Hack。
相關(guān)文章
詳解IE瀏覽器的haslayout屬性及相關(guān)兼容性問(wèn)題解決
haslayout是IE瀏覽器專(zhuān)有的屬性,然而這個(gè)屬性卻同樣會(huì)給不同版本的IE帶來(lái)浮動(dòng)問(wèn)題等一些列兼容性上面的麻煩...這里我們就來(lái)詳解IE瀏覽器的haslayout屬性及相關(guān)兼容性問(wèn)題解2016-07-08瀏覽器hack總結(jié) 詳細(xì)的瀏覽器兼容性的快速解決方法
下面小編就為大家?guī)?lái)一篇瀏覽器hack總結(jié) 詳細(xì)的瀏覽器兼容性的快速解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起公司小編過(guò)來(lái)看看吧2016-06-16HTML5的video標(biāo)簽的瀏覽器兼容性增強(qiáng)方案分享
使用HTML5時(shí)就應(yīng)該考慮包括桌面以及移動(dòng)端的瀏覽器兼容問(wèn)題,特別是視頻方面瀏覽器對(duì)解碼的支持會(huì)有所不同,所以下面就來(lái)分享一個(gè)HTML5的video標(biāo)簽的瀏覽器兼容性增強(qiáng)方案分2016-05-19CSS3中的Opacity多瀏覽器透明度兼容性問(wèn)題
用來(lái)設(shè)定元素透明度的 Opacity 是CSS 3里的一個(gè)屬性。當(dāng)然現(xiàn)在還只有少部分瀏覽器支持，不過(guò)各個(gè)瀏覽器都有自己的私有屬性來(lái)支持,其中包括老版本的Mozilla和Safari2015-11-09- 火狐瀏覽器怎么切換到IE兼容模式？有很多網(wǎng)頁(yè)其他瀏覽器打不開(kāi)，但是用ie瀏覽器就可以打開(kāi)，怎么設(shè)置成ie兼容模式呢？下面我們來(lái)看看火狐瀏覽器切換到IE兼容模式的詳細(xì)圖文2015-10-27
- 下面小編就為大家?guī)?lái)一篇淺談瀏覽器的兼容性(必看篇)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-25