完美兼容IE6/IE7/Firefox/Opera這幾個主流瀏覽器的CSS hack_一米...

阡陌小曼 2010-02-08

展開全文

完美兼容IE6/IE7/Firefox/Opera這幾個主流瀏覽器的CSS hack

2009年11月11日星期三下午 01:23

這是網(wǎng)上廣為流傳的一個號稱完美兼容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認(rèn)為是CSS語法錯誤，所以忽略。但是不同IE版本識別不同，不忽略，所以能實現(xiàn)hack，并且*+HTML還能通過W3C驗證，呵呵，爽吧。opera那個就不多說了，也是類似原理，但是看起來比較崩潰，要說明的是，firefox下沒問題的話，opera基本也沒什么問題的，所以不太會用到這個hack。
需要注意的是：*+html 對IE7的HACK 必須保證HTML頂部有如下聲明,”<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”　”http://www./TR/html4/loose.dtd“>”
所以，在我看來，這也不是什么完美的解決方法。
第二個是我比較常用的，假設(shè)要給一個元素設(shè)定在不同瀏覽器中使用不同的背景顏色。
```
                #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都不支持。
比較常用的條件注釋，但我從來不用，不知道為什么，反正就是感覺煩。
1.<!–[if lte IE 6]>
2.<link rel=”stylesheet” type=”text/css” href=”ie_hacks.css”></link>
3.<![endif]–>
Stylegala- No More CSS Hacks
用此方法—Stylegala- No More CSS Hacks，服務(wù)器端判斷 user agent 從而給出不同的 css 文件。
目前我知道的就是這幾個，至于* html yourId{}這樣的寫法，大多數(shù)時候并不能很好的兼容IE6和IE7，有的時候不知道怎么弄的，甚至根本沒作用，不知道是我哪里沒弄對。