簡單CSS hack:區(qū)分IE6、IE7、IE8、Firefox、Opera
文章來源:365jz.com 點擊數(shù):
1053 更新時間:2009-09-29 09:20
參與評論
方法一:
跨瀏覽器的網(wǎng)頁設計一直是讓人很頭疼的問題,這不只是因為瀏覽器的版本眾多,還有一個重要的原因是相同瀏覽器的不同時期的版本也會有差異, 甚至是在不同操作同臺上還會有不同。因此使CSS hack技術進行瀏覽器區(qū)分是實現(xiàn)跨瀏覽器訪問一個好方法。CSS Hack技術有很多,具體可以查看:
本文據(jù)說的主要是通過“.”,“>”,“*”,“_”來區(qū)分。以下是本人對這四種符號的測試結果:
———————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 ;
- > color : green !important ;
- color : red ;
因此這就實現(xiàn)了跨瀏覽器的表現(xiàn)問題。_property和*property也是一樣的。對于_property來說,只有IE6才能識別,因此可以用于單獨對IE6的設置中。
不過這里要注意書寫的順序:現(xiàn)在瀏覽器的寫法要寫在最前面,IE6的寫法要寫在最后面用于覆蓋,其他瀏覽器寫在中間。
方法二:
其實主要是瀏覽器:IE6/IE7/firefox下,各個對CSS代碼的解釋有區(qū)別,下邊轉載一篇HACK的文章,相當實用。
區(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都能識別
* 標準瀏覽器(如FF)不能識別
* IE6能識別
* ,但不能識別
!important IE7能識別
* ,也能識別
!important FF不能識別
* ,但能識別
!important 另外再補充一個,下劃線"
_ ",
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的寫在后面。
Tag標簽: CSS hack,區(qū)分IE6、IE7、IE8、Firefox、Opera
如對本文有疑問,請?zhí)峤坏浇涣髡搲?,廣大熱心網(wǎng)友會為你解答?。?點擊進入論壇
------分隔線----------------------------