完美兼容IE6/IE7/Firefox/Opera這幾個(gè)主流瀏覽器的CSS hack
2009年11月11日 星期三 下午 01:23
-
這是網(wǎng)上廣為流傳的一個(gè)號(hào)稱完美兼容IE6/IE7/Firefox/Opera這幾個(gè)主流瀏覽器的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語法錯(cuò)誤，所以忽略。但是不同IE版本識(shí)別不同，不忽略，所以能實(shí)現(xiàn)hack，并且*+HTML還能通過W3C驗(yàn)證，呵呵，爽吧。opera那個(gè)就不多說了，也是類似原理，但是看起來比較崩潰，要說明的是，firefox下沒問題的話，opera基本也沒什么問題的，所以不太會(huì)用到這個(gè)hack。
需要注意的是：*+html 對(duì)IE7的HACK 必須保證HTML頂部有如下聲明,”<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www./TR/html4/loose.dtd“>”
所以，在我看來，這也不是什么完美的解決方法。
- 第二個(gè)是我比較常用的，假設(shè)要給一個(gè)元素設(shè)定在不同瀏覽器中使用不同的背景顏色。
#yourId/.yourClass {2.background:none /*normal*/;
*background:#300 !important/*IE7 only*/;
*background:#400 /*IE6 and below*/}
注意書寫的順序是Firefox第一，IE7第二，IE6在最后;其實(shí)IE6的*background也可以寫成_background，因?yàn)橹挥蠭E6支持下劃線，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 文件。
- 目前我知道的就是這幾個(gè)，至于* html yourId{}這樣的寫法，大多數(shù)時(shí)候并不能很好的兼容IE6和IE7，有的時(shí)候不知道怎么弄的，甚至根本沒作用，不知道是我哪里沒弄對(duì)。
|
|
