幾種相容各大瀏覽器的的通用CSS hack方法
在Underone的網站看到他對Hack一事大發牢騷甚感頭痛。
現分享一些我所知道的針對各種瀏覽器的Hack方法。
1.這是網上廣為流傳的一個號稱完美相容IE6/IE7/Firefox/Opera這幾個主流瀏覽器的CSS hack通用方法。
#yourId/.yourClass {/*normal*/}2. * html #yourId/.yourClass {/*IE6 and below*/}
*+html #yourId/.yourClass {/*IE7 only*/}
@media all and (min-width:0px){
#yourId/.yourClass { /*opera*/ }
}
原理是Firefox認為是CSS語法錯誤，所以忽略。但是不同IE版本識別不同，不忽略，所以能實現hack，並且*+HTML還能通過W3C驗證，呵呵，爽吧。opera那個就不多說了，也是類似原理，但是看起來比較崩潰，要說明的是，firefox下沒問題的話，opera基本也沒什麼問題的，所以不太會用到這個hack。
需要注意的是：*+html 對IE7的HACK 必須保證HTML頂部有如下聲明,”<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd“>”
所以，在我看來，這也不是什麼完美的解決方案。
2.第二個是我比較常用的，假設要給一個元素設定在不同瀏覽器中使用不同的背景顏色。
#yourId/.yourClass {2.background:none /*normal*/;
*background:#300 !important/*IE7 only*/;
*background:#400 /*IE6 and below*/}
注意書寫的順序是Firefox第一，IE7第二，IE6在最後;其實IE6的*background也可以寫成_background，因為只有IE6支援底線，IE7和Firefox都不支援。
3.比較常用的條件注釋，但我從來不用，不知道為什麼，反正就是感覺煩。
1.<!–[if lte IE 6]>
2.<link rel=”stylesheet” type=”text/css” href=”ie_hacks.css”></link>
3.<![endif]–>
4.Stylegala- No More CSS Hacks
用此方法—Stylegala- No More CSS Hacks，伺服器端判斷 user agent 從而給出不同的 css 檔案。
目前我知道的就是這幾個，至於* html yourId{}這樣的寫法，大多數時候並不能很好的相容IE6和IE7，有的時候不知道怎麼弄的，甚至根本沒作用，不知道是我哪裡沒弄對。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
