方法一:
??跨瀏覽器的網(wǎng)頁設(shè)計一直是讓人很頭疼的問題,這不只是因為瀏覽器的版本眾多,還有一個重要的原因是相同瀏覽器的不同時期的版本也會有差異,甚至是在不同操作同臺上還會有不同。因此使CSS hack技術(shù)進(jìn)行瀏覽器區(qū)分是實現(xiàn)跨瀏覽器訪問一個好方法。CSS Hack技術(shù)有很多,具體可以查看:
??本文據(jù)說的主要是通過“.”,“>”,“*”,“_”來區(qū)分。以下是本人對這四種符號的測試結(jié)果:
———————IE6——????IE7——IE8——FF2——FF3—????Opera9.5
>property——????Y——????Y——????Y——????N——????N——????N
.property——????Y——????Y——????Y——????N——????N——????N
*property——????Y——????Y——????Y——????N——????N——????N
_property——????Y——????N——????N——????N——????N——????N
我們可以看到>property、.property、*property在各瀏覽器中的表現(xiàn)是一致的,只有_property在IE6和IE7、IE8中有所區(qū)別。另外還要注意的,IE6是不支持!important的,而其他幾款瀏覽器都識別。
舉例:
要對想同的文字在不同瀏覽器中顯示不同的顏色可以使用:
??本文據(jù)說的主要是通過“.”,“>”,“*”,“_”來區(qū)分。以下是本人對這四種符號的測試結(jié)果:
———————IE6——????IE7——IE8——FF2——FF3—????Opera9.5
>property——????Y——????Y——????Y——????N——????N——????N
.property——????Y——????Y——????Y——????N——????N——????N
*property——????Y——????Y——????Y——????N——????N——????N
_property——????Y——????N——????N——????N——????N——????N
我們可以看到>property、.property、*property在各瀏覽器中的表現(xiàn)是一致的,只有_property在IE6和IE7、IE8中有所區(qū)別。另外還要注意的,IE6是不支持!important的,而其他幾款瀏覽器都識別。
舉例:
要對想同的文字在不同瀏覽器中顯示不同的顏色可以使用:
color
:brown?
!important
;??
/*用于Opera、Firefox2、Firefox3等現(xiàn)代瀏覽器*/
??
- > color : green ? !important ;???? /*IE7、IE8可以識別該規(guī)則,因此它覆蓋掉了上一條規(guī)則*/ ??
- color : red ;?? /*所有瀏覽器都可以識別,但是以上兩條規(guī)則有!important,所以這條規(guī)則被忽視;只有IE6認(rèn)識并覆蓋掉上兩條規(guī)則*/ ??
color:brown !important;??/*用于Opera、Firefox2、Firefox3等現(xiàn)代瀏覽器*/ >color:green !important;????/*IE7、IE8可以識別該規(guī)則,因此它覆蓋掉了上一條規(guī)則*/ color:red;??/*所有瀏覽器都可以識別,但是以上兩條規(guī)則有!important,所以這條規(guī)則被忽視;只有IE6認(rèn)識并覆蓋掉上兩條規(guī)則*/
因此這就實現(xiàn)了跨瀏覽器的表現(xiàn)問題。_property和*property也是一樣的。對于_property來說,只有IE6才能識別,因此可以用于單獨(dú)對IE6的設(shè)置中。
不過這里要注意書寫的順序:現(xiàn)在瀏覽器的寫法要寫在最前面,IE6的寫法要寫在最后面用于覆蓋,其他瀏覽器寫在中間。
?
不過這里要注意書寫的順序:現(xiàn)在瀏覽器的寫法要寫在最前面,IE6的寫法要寫在最后面用于覆蓋,其他瀏覽器寫在中間。
?
方法二:
其實主要是瀏覽器:IE6/IE7/firefox下,各個對CSS代碼的解釋有區(qū)別,下邊轉(zhuǎn)載一篇HACK的文章,相當(dāng)實用。
區(qū)別 IE6 與 FF :?????????? background: orange ; * background: blue ;
區(qū)別 IE6 與 IE7 :????????? background: green !important ;background: blue ;
區(qū)別 IE7 與FF:?????????? background: orange ; * background: green ;
區(qū)別 FF / IE7 / IE6 :?????? background: orange ; * background: green !important ; * background: blue ;
注:IE都能識別 * 標(biāo)準(zhǔn)瀏覽器(如FF)不能識別 *
IE6能識別 * ,但不能識別 !important
IE7能識別 * ,也能識別 !important
FF不能識別 * ,但能識別 !important
另外再補(bǔ)充一個,下劃線" _ ",
IE6支持下劃線,IE7和firefox均不支持下劃線。(推薦.我這只有這個有效!)
于是大家還可以這樣來區(qū)分 IE6 、 IE7 、 firefox
: background: orange ; * background: green ; _ background: blue ;
* html??p {color:#f00;}? ?? ?? ?? ?支持 IE6? ?? ???不支持FF IE7 IE8b
*+html p {color:#f00;}? ?? ?? ?? ?支持 IE7 IE8b? ?? ???不支持FF IE6
p {*color:#f00;}? ?? ?? ?? ?支持 IE7 IE6? ?? ???不支持FF IE8
注:不管是什么方法,書寫的順序都是firefox的寫在前面,IE7的寫在中間,IE6的寫在后面。
區(qū)別 IE6 與 FF :?????????? background: orange ; * background: blue ;
區(qū)別 IE6 與 IE7 :????????? background: green !important ;background: blue ;
區(qū)別 IE7 與FF:?????????? background: orange ; * background: green ;
區(qū)別 FF / IE7 / IE6 :?????? background: orange ; * background: green !important ; * background: blue ;
注:IE都能識別 * 標(biāo)準(zhǔn)瀏覽器(如FF)不能識別 *
IE6能識別 * ,但不能識別 !important
IE7能識別 * ,也能識別 !important
FF不能識別 * ,但能識別 !important
另外再補(bǔ)充一個,下劃線" _ ",
IE6支持下劃線,IE7和firefox均不支持下劃線。(推薦.我這只有這個有效!)
于是大家還可以這樣來區(qū)分 IE6 、 IE7 、 firefox
: background: orange ; * background: green ; _ background: blue ;

* html??p {color:#f00;}? ?? ?? ?? ?支持 IE6? ?? ???不支持FF IE7 IE8b
*+html p {color:#f00;}? ?? ?? ?? ?支持 IE7 IE8b? ?? ???不支持FF IE6
p {*color:#f00;}? ?? ?? ?? ?支持 IE7 IE6? ?? ???不支持FF IE8
注:不管是什么方法,書寫的順序都是firefox的寫在前面,IE7的寫在中間,IE6的寫在后面。
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯(lián)系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長非常感激您!手機(jī)微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
