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