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

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

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

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

1. <style type="text/css">   
2. .css-hack {   
3.     background-color: red;   
4.     background-color: blue; /* 最終背景色顯示為藍色 */  
5. }   
6. </style>   
7. <div class="css-hack">CodePlayer</div>  

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

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

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

再者如，由於IE 6不支援max-width屬性，但是IE6的css屬性值支援expression表示式。因此，我們可以為IE 6 折中實現max-width的屬性效果。

1. .css-hack {   
2.     background-color: red;   
3.     max-width: 200px;   
4.     _width: expression( function(me){ var maxWidth = 200; me.style.width = (me.offsetWidth <= maxWidth ? me.offsetWidth : maxWidth) + "px"; }(this) ); /* _開頭只有IE6可以識別，出於效能考慮，此處的表示式只會執行一次 */  
5. }  

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

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

所有的IE瀏覽器的CSS Hack

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

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

IE 6的CSS Hack

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

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

IE 7的CSS Hack

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

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

注意：有些網頁上說，只用+、*或者#號的屬性字首就可以只讓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)。

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

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

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

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

IE 8的CSS Hack

只有IE8支援巢狀如下@media型別查詢語句：@media \0screen。

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

IE 9的CSS Hack

沒找到一個靠譜的。

IE 10的CSS Hack

沒找到一個靠譜的。

IE 11的CSS Hack

沒找到一個靠譜的。

IE 6 + IE 7 的CSS Hack

如上所述，只有IE 6、IE 7可以識別加了+或*號的屬性字首。

1. .css-hack {   
2.     color: red; /* 其他瀏覽器顯示紅色 */  
3.     *color: blue; /* IE 6、IE 7顯示為藍色 */  
4. }  

FireFox、Chrome、Safari、Opera的CSS Hack

FireFox的CSS Hack

FireFox支援巢狀其專用的css語句：@-moz-document url-prefix()。

1. .css-hack {   
2.     color: red; /* 其他瀏覽器顯示紅色 */  
3. }   
4. @-moz-document url-prefix() {   
5.     .css-hack {   
6.         color: blue; /* 只有FireFox顯示為藍色 */  
7.     }   
8. }  

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

Chrome、Safari等採用webkit核心的瀏覽器支援媒體型別查詢語句：@media screen and (-webkit-min-device-pixel-ratio:0)。

1. .css-hack {   
2.     color: red; /* 其他瀏覽器顯示紅色 */  
3. }   
4. @media screen and (-webkit-min-device-pixel-ratio:0) {    
5.     .css-hack {   
6.         color: blue; /* Webkit核心瀏覽器顯示藍色 */  
7.     }   
8. }  

慎用\0的CSS Hack

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

網上的示例是這樣的：

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

通過實際測試發現，關於使用字元\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有關的程式碼。

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

這個時候，在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。

轉載自：http://www.jb51.net/do/plus/view.php?aid=439843