主頁(yè) > 知識(shí)庫(kù) > 瀏覽器兼容解決FF/IE6/IE7背景專(zhuān)用CSS HACK

瀏覽器兼容解決FF/IE6/IE7背景專(zhuān)用CSS HACK

熱門(mén)標(biāo)簽:蘇州做電話(huà)機(jī)器人 沈陽(yáng)400電話(huà)辦理多少錢(qián) ai電話(huà)機(jī)器人效果差 隨州外呼系統(tǒng)廠(chǎng)家 南山電話(huà)機(jī)器人 地圖標(biāo)注樓盤(pán) 快速更改地圖標(biāo)注點(diǎn)標(biāo) 地圖標(biāo)注微信好友 南昌電話(huà)機(jī)器人系統(tǒng)
自從互聯(lián)網(wǎng)開(kāi)始的那一刻起,各瀏覽器間的爭(zhēng)斗就沒(méi)有停止過(guò)。當(dāng)然其中最苦的就是網(wǎng)頁(yè)制作人員了,為了達(dá)到用戶(hù)體驗(yàn)以及可用性的標(biāo)準(zhǔn),不得不在多個(gè)瀏覽器上為統(tǒng)一效果而奔波。真希望哪一天FF可以一統(tǒng)天下,雖然現(xiàn)在還是IE的大天下。特別是微軟最新發(fā)布的IE7瀏覽器,其CSS的兼容性確實(shí)給一些網(wǎng)頁(yè)制作人員又添加了一個(gè)沉重的新負(fù)擔(dān)。
為了讓各瀏覽器有同樣的顯示效果,我們不得不用到CSS HACK。當(dāng)然在這篇文章中我們只談現(xiàn)在使用率最高的IE6和FF,以及將來(lái)可能會(huì)成為主流的IE7的CSS HACK,至于IE6以下版本已OP、SF在這此先不詳細(xì)說(shuō)明。新手看了這片文章一定會(huì)有所收獲,而高手們路過(guò)一下就可以了,呵呵!

方案一
先來(lái)看看下面的CSS代碼:

background-color:orange; 
*background-color:blue!important; 
*background-color:red;

[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

下面我簡(jiǎn)單解釋一下各瀏覽器怎樣理解這三個(gè)屬性:
在FF下,第2、3個(gè)屬性不認(rèn)識(shí),其中第2個(gè)屬性如果只是加了!important的話(huà)FF一定認(rèn)識(shí)的,但因?yàn)榍懊嬗旨恿藗€(gè)*,所以不認(rèn)識(shí)了(僅IE7認(rèn)識(shí))。所以它讀的是background-color:orange;
在IE7下,第1、2、3個(gè)屬性IE7雖然都認(rèn)識(shí),但!important表示的是優(yōu)先,所以它讀的是*background-color:blue!important;
在IE6下,第2個(gè)屬性不認(rèn)識(shí),第1、3個(gè)屬性都認(rèn)識(shí),但因?yàn)榈?個(gè)屬性覆蓋掉第1個(gè)屬性,所以IE6最終讀取的*background-color:red。

方案二
先來(lái)看看下面的CSS代碼:
復(fù)制代碼 代碼如下:

background-color:orange;   
*background-color:blue;   
_background-color:red; 


[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

下面我簡(jiǎn)單解釋一下各瀏覽器怎樣理解這三個(gè)屬性:
在FF下,第2、3個(gè)屬性FF不認(rèn)識(shí),所以它讀的是background-color:orange;
在IE7下,第3個(gè)屬性IE7不認(rèn)識(shí),所以它讀第1、2個(gè)屬性,又因?yàn)榈?個(gè)屬性覆蓋了第1個(gè)屬性,所以IE7最終讀出的是第2個(gè)屬性*background-color:blue;
在IE6下,這3個(gè)屬性IE6都認(rèn)識(shí),所以3個(gè)屬性都可以讀取,又因?yàn)榈?個(gè)屬性覆蓋掉前2個(gè)屬性,所以IE6最終讀取的是_background-color:red。

其中IE的讀取屬性一定要知道,這對(duì)初學(xué)者而言使用CSS HACK是非常至關(guān)重要的,瀏覽器讀取屬性是從上至下的,也就是說(shuō)同樣屬性的設(shè)置最后一個(gè)讀取到的才是在瀏覽器上顯示的。此外在方案二種的“_”這是只有IE6才認(rèn)識(shí)的,可見(jiàn)其大胃王的感覺(jué)。另外!important不同,它打破了從上至下的讀取習(xí)慣,使用的是優(yōu)先顯示。而在上述兩個(gè)方案中可以看出FF除了正規(guī)CSS書(shū)寫(xiě)和!important外其它都不認(rèn)識(shí),標(biāo)準(zhǔn)就是統(tǒng)一的。

在這里并不是慫恿大家鼓勵(lì)使用CSS HACK,只是別看到其他人寫(xiě)的CSS代碼中有這些HACK不知道是什么意思。畢竟用CSS HACK來(lái)解決瀏覽器間的兼容并不是長(zhǎng)遠(yuǎn)方法,如果新版本瀏覽器的出現(xiàn)說(shuō)不定會(huì)把你原來(lái)寫(xiě)的CSS HACK怎樣,IE7就是個(gè)很好的例子。盡量達(dá)到零使用CSS HACK或者說(shuō)少使用,因?yàn)楹玫牟季纸Y(jié)構(gòu)是可以很好解決這些問(wèn)題,這樣的網(wǎng)站也大有人在。

您可能感興趣的文章:
  • CSS Hack 匯總速查手冊(cè)瀏覽器兼容必會(huì)
  • CSS hack瀏覽器兼容一覽表
  • 常見(jiàn)的瀏覽器Hack技巧整理

標(biāo)簽:濰坊 玉樹(shù) 濰坊 大同 深圳 石家莊 昭通 商洛

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《瀏覽器兼容解決FF/IE6/IE7背景專(zhuān)用CSS HACK》,本文關(guān)鍵詞  瀏覽器,兼容,解決,IE6,IE7,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《瀏覽器兼容解決FF/IE6/IE7背景專(zhuān)用CSS HACK》相關(guān)的同類(lèi)信息!
  • 本頁(yè)收集關(guān)于瀏覽器兼容解決FF/IE6/IE7背景專(zhuān)用CSS HACK的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章