淺談各種瀏覽器下的CSS Hack兼容性寫法
由于不同瀏覽器所遵循的標準也有所不同，再加上不可避免的程序bug、經濟利益等因素的干擾 。同樣的網頁代碼(HTMLCSS)，在不同瀏覽器上的顯示效果卻略有不同，甚至大有不同 。即使是同一個瀏覽器，其不同版本的顯示效果也有所不同，尤其是IE 。這就給網頁前端設計人員帶來了很大的困擾 。開發人員必須兼顧考慮到所有主流的瀏覽器，才能在不同的瀏覽器上顯示出相同或滿足需要的效果 。于是CSS Hack技術就誕生了 。
CSS Hack技術，就是利用不同瀏覽器不同版本之間的CSS實現的特性差異，來滿足我們需要的效果：在所有主流瀏覽器上顯示統一的效果，或者為特定瀏覽器顯示特定的效果 。
眾所周知，如果在一個css樣式選擇器中存在兩個名稱相同的屬性，瀏覽器一般會以最后面的屬性為準 。
當然 ， 這里有個前提 ， 那就是瀏覽器首先得能夠識別并支持該css屬性，對于瀏覽器不支持的css屬性或值，瀏覽器將一律將其忽略 。
這就是CSS Hack技術的實現原理 。例如：即使我們在屬性名稱前面加上一個下劃線_ ， IE 6 照樣可以識別該屬性，而且只有IE 6可以識別 。因此，我們就可以利用這個特性，讓IE 6實現某些特定的效果 。
再者如，由于IE 6不支持max-width屬性，但是IE6的css屬性值支持expression表達式 。因此，我們可以為IE 6 折中實現max-width的屬性效果 。
下面，我們就來探討IE 6-11、FireFox、Chrome、Safari、Opera等瀏覽器的CSS Hack技術，以供特定瀏覽器進行特定屬性的識別(國產瀏覽器一般都使用IE或Chromium內核，因此不予考慮) 。
備注：以下內容多搜集于網絡(在網絡上搜集的時候發現 ， 網上胡說八道的真多……)，并進行了親自測試，以盡量確保準確無誤，但由于各種系統平臺、語言環境、大版本、小版本等問題，筆者并不能保證沒有任何遺漏或錯誤 。如果有讀者發現，敬請留言告知 。
IE瀏覽器的CSS Hack
所有的IE瀏覽器的CSS Hack
由于所有的IE瀏覽器都能夠識別特定的css屬性值后綴9，因此我們可以給css的屬性值添加9后綴(在結尾的分號之前)，從而做到只有IE瀏覽器能夠識別該屬性，其他瀏覽器無法識別從而將其忽略掉 。
IE 6的CSS Hack
毫無疑問，如上所述，為css的屬性前面加下劃線_ ， 這是給IE6專用的 。
IE 7的CSS Hack
IE6、IE7都能夠識別加了 、*或#前綴的css屬性名稱 ， 但是IE 7不支持_前綴，而IE6支持 。因此，我們可以先寫一個*屬性、 屬性或#屬性讓IE6、IE7都能識別，再寫一個_屬性，只讓IE6識別，將屬性值復原回去，從而讓前者只對IE 7生效 。
注意：有些網頁上說 ， 只用 、*或者#號的屬性前綴就可以只讓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) 。
此外，IE 7也支持在選擇器前添加* html ，讓當前選擇器成為* html的后輩選擇器，只有IE 7可以識別此類樣式選擇器(據說某些舊版本的Opera瀏覽器也能識別 ， 不過這些版本早已作古了，無需考慮) 。
IE 7還支持在選擇器前添加*:first-child html，讓當前選擇器成為*:first-child html的后輩選擇器 。
IE 8的CSS Hack
只有IE8支持嵌套如下@media類型查詢語句：@media screen 。
IE 9的CSS Hack
沒找到一個靠譜的 。
IE 10的CSS Hack
沒找到一個靠譜的 。
IE 11的CSS Hack
沒找到一個靠譜的 。
IE 6IE 7 的CSS Hack
如上所述，只有IE 6、IE 7可以識別加了 或*號的屬性前綴 。
【淺談各種瀏覽器下的CSS Hack兼容性寫法】FireFox、Chrome、Safari、Opera的CSS Hack
FireFox的CSS Hack
FireFox支持嵌套其專用的css語句：@-moz-document url-prefix() 。
Chrome、Safari等Webkit內核的瀏覽器的CSS Hack
Chrome、Safari等采用webkit內核的瀏覽器支持媒體類型查詢語句：@media screen and (-webkit-min-device-pixel-ratio:0) 。
慎用的CSS Hack
網上許多與CSS Hack相關的文章中說，在css的屬性值和分號之間添加字符，可以實現對IE 8或 IE 9的CSS hack(有的說 ， 僅支持IE8) 。
網上的示例是這樣的：
通過實際測試發現，關于使用字符實現的上述CSS Hack有3點需要注意 。
1、IE10也能夠識別添加了字符的css屬性值(筆者這里沒有IE 11 ， 不知道IE 11是否也能識別) 。
2、屬性值和之間不能有空格，有一個空格的話(例如：blue ) ， 在IE 8中就失效了，僅對IE 9/IE 10有效 。
3、如果我們只想對IE 8/IE 9進行CSS Hack呢？這個時候，我們去掉后面兩行與IE6、IE7有關的代碼 。
這個時候，在IE 6、IE 7瀏覽器中，你會發現你看到的不是紅色，而是黑色(也就是默認的字體顏色)！
這是因為一般瀏覽器的思路是 ， 先過濾掉無效的css屬性值，然后再從正確的屬性設置中根據優先級獲取最后面的css屬性值 。而IE 6/7瀏覽器不是先過濾掉無效的屬性值，而是先根據優先級，獲取最后面的css屬性值，然后再來判斷該屬性值是否，無效就忽略掉 。因此，如果按照網上所說，僅僅使用來實現IE 8 的CSS Hack，則會對IE6/7中的顯示效果造成破壞 。你必須通過額外的css屬性設置來復原IE6/7的樣式 。
因為，我們不能夠簡單地下結論說，使用可以實現對IE 8、IE 9甚至IE 10的CSS Hack 。
