幾種相容各大瀏覽器的的通用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,有的時候不知道怎麼弄的,甚至根本沒作用,不知道是我哪裡沒弄對。