關於不同瀏覽器下的CSS中Hack的相容性

這篇文章主要介紹了各種瀏覽器下的CSS Hack相容性寫法,CSS Hack大致可以分為內部Hack和選取器Hack以及HTML頭部引用Hack,需要的朋友可以參考下

由於不同瀏覽器所遵循的標準也有所不同，再加上不可避免的程式bug、經濟利益等因素的幹擾。同樣的網頁代碼(HTML + CSS)，在不同瀏覽器上的顯示效果卻略有不同，甚至大有不同。即使是同一個瀏覽器，其不同版本的顯示效果也有所不同，尤其是IE。這就給網頁前端設計人員帶來了很大的困擾。開發人員必須兼顧考慮到所有主流的瀏覽器，才能在不同的瀏覽器上顯示出相同或滿足需要的效果。於是CSS Hack技術就誕生了。

CSS Hack技術，就是利用不同瀏覽器不同版本之間的CSS實現的特性差異，來滿足我們需要的效果：在所有主流瀏覽器上顯示統一的效果，或者為特定瀏覽器顯示特定的效果。

眾所周知，如果在一個css樣式選取器中存在兩個名稱相同的屬性，瀏覽器一般會以最後面的屬性為準。

<style type="text/css">   .css-hack {       background-color: red;       background-color: blue; /* 最終背景色顯示為藍色 */}   </style>   <p class="css-hack">CodePlayer</p>

當然，這裡有個前提，那就是瀏覽器首先得能夠識別並支援該css屬性，對於瀏覽器不支援的css屬性或值，瀏覽器將一律將其忽略。

這就是CSS Hack技術的實現原理。例如：即使我們在屬性名稱前面加上一個底線_，IE 6 照樣可以識別該屬性，而且只有IE 6可以識別。因此，我們就可以利用這個特性，讓IE 6實現某些特定的效果。

.css-hack {       background-color: red; /* 在其他瀏覽器上顯示為紅色 */    _background-color: blue; /* 在IE 6上顯示為藍色 */}

再者如，由於IE 6不支援max-width屬性，但是IE6的css屬性值支援expression運算式。因此，我們可以為IE 6 折中實現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可以識別，出於效能考慮，此處的運算式只會執行一次 */}

下面，我們就來探討IE 6-11、FireFox、Chrome、Safari、Opera等瀏覽器的CSS Hack技術，以供特定瀏覽器進行特定屬性的識別(國產瀏覽器一般都使用IE或Chromium核心，因此不予考慮)。

備忘：以下內容多搜集於網路(在網路上搜集的時候發現，網上胡說八道的真多……)，並進行了親自測試，以盡量確保準確無誤，但由於各種系統平台、語言環境、大版本、小版本等問題，筆者並不能保證沒有任何遺漏或錯誤。如果有讀者發現，敬請留言告知。
IE瀏覽器的CSS Hack

所有的IE瀏覽器的CSS Hack

由於所有的IE瀏覽器都能夠識別特定的css屬性值尾碼\9，因此我們可以給css的屬性值添加\9尾碼(在結尾的分號之前)，從而做到只有IE瀏覽器能夠識別該屬性，其他瀏覽器無法識別從而將其忽略掉。

.css-hack {       background-color: red; /* 其他瀏覽器上顯示為紅色 */    background-color: blue \9; /* 所有IE瀏覽器上顯示為藍色 */}

IE 6的CSS Hack

毫無疑問，如上所述，為css的屬性前面加底線_，這是給IE6專用的。

.css-hack {       background-color: red; /* 其他瀏覽器上顯示為紅色 */    _background-color: blue; /* 只有IE 6瀏覽器上顯示為藍色 */}

IE 7的CSS Hack

IE6、IE7都能夠識別加了+、*或#首碼的css屬性名稱，但是IE 7不支援_首碼，而IE6支援。因此，我們可以先寫一個*屬性、+屬性或#屬性讓IE6、IE7都能識別，再寫一個_屬性，只讓IE6識別，將屬性值複原回去，從而讓前者只對IE 7生效。

.css-hack {       color: red; /* 其他瀏覽器上顯示為紅色 */    +color: blue; /* 只有 IE 6、IE 7 瀏覽器上顯示為藍色 */    _color: red; /* 讓 IE 6 複原為之前設定的顏色 */}

注意：有些網頁上說，只用+、*或者#號的屬性首碼就可以只讓IE 7進行單獨識別。不過經過本人親測，不管是用IE Tester，還是專門下載一個XP系統，用原版IE 6測試，都表明：IE6、IE7都可以識別+、*或#號的屬性首碼。
另外，還有人說，IE 7支援!important，IE 6不支援!important，因此可以通過*屬性: 值!important;的形式來實現IE 7的CSS Hack。

實際上，這樣也是不行的，因為IE 6不是不支援!important，只是有個bug而已，詳情請參見IE6究竟支不支援!important和IE6 IE7(Q) IE8(Q) 不完全支援!important規則。

使用!important來實現IE 7的CSS Hack，必須是在同一個樣式選取器中，而且同樣需要在後面加_屬性來複原IE 6的設定(這種方式還麻煩點，上面的方法還少寫個!important)。

.css-hack {       color: red; /* 其他瀏覽器上顯示為紅色 */    *color: blue !important; /* 只有 IE 6、IE 7 瀏覽器上顯示為藍色 */    _color: red; /* 讓 IE 6 複原為之前設定的顏色 */}

此外，IE 7也支援在選取器前添加*+html ，讓當前選取器成為*+html的後輩選取器，只有IE 7可以識別此類樣式選取器(據說某些舊版本的Opera瀏覽器也能識別，不過這些版本早已作古了，無需考慮)。

.css-hack {       color: red; /* 其他瀏覽器顯示紅色 */}   *+html .css-hack {       color: blue; /* 只有IE 7顯示藍色  */}

IE 7還支援在選取器前添加*:first-child+html，讓當前選取器成為*:first-child+html的後輩選取器。

IE 8的CSS Hack

只有IE8支援嵌套如下@media類型查詢語句：@media \0screen。

.css-hack {       color: red; /* 其他瀏覽器顯示紅色 */}   @media \0screen {       .css-hack { color: blue; } /* 只有IE 8顯示藍色 */}

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顯示為藍色 */}

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顯示為藍色 */    }   }

Chrome、Safari等Webkit核心的瀏覽器的CSS Hack

Chrome、Safari等採用webkit核心的瀏覽器支援媒體類型查詢語句：@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核心瀏覽器顯示藍色 */    }   }

慎用\0的CSS Hack

網上許多與CSS Hack相關的文章中說，在css的屬性值和分號之間添加字元\0，可以實現對IE 8或 IE 9的CSS hack(有的說，僅支援IE8)。

網上的樣本是這樣的：

.css-hack {       color: red; /* 其他瀏覽器顯示紅色 */    color: blue\0; /* IE8、IE9 顯示藍色 */    +color: green; /* IE7 顯示綠色 */    _color: brown; /* IE6 顯示棕色 */}

通過實際測試發現，關於使用字元\0實現的上述CSS Hack有3點需要注意。

1、IE10也能夠識別添加了字元\0的css屬性值(筆者這裡沒有IE 11，不知道IE 11是否也能識別)。

2、屬性值和\0之間不能有空格，有一個空格的話(例如：blue \0)，在IE 8中就失效了，僅對IE 9/IE 10有效。

3、如果我們只想對IE 8/IE 9進行CSS Hack呢？這個時候，我們去掉後面兩行與IE6、IE7有關的代碼。

.css-hack {       color: red; /* 其他瀏覽器顯示紅色 */    color: blue\0; /* IE8、IE9 顯示藍色 */}

這個時候，在IE 6、IE 7瀏覽器中，你會發現你看到的不是紅色，而是黑色(也就是預設的字型顏色)！

這是因為一般瀏覽器的思路是，先過濾掉無效的css屬性值，然後再從正確的屬性設定中根據優先順序擷取最後面的css屬性值。而IE 6/7瀏覽器不是先過濾掉無效的屬性值，而是先根據優先順序，擷取最後面的css屬性值，然後再來判斷該屬性值是否，無效就忽略掉。因此，如果按照網上所說，僅僅使用\0來實現IE 8+的CSS Hack，則會對IE6/7中的顯示效果造成破壞。你必須通過額外的css屬性設定來複原IE6/7的樣式。

因為，我們不能夠簡單地下結論說，使用\0可以實現對IE 8、IE 9甚至IE 10 +的CSS Hack。

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！