方案一
先來(lái)看看下面的CSS代碼：
background-color:orange;
*background-color:blue!important;
*background-color:red;
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
下面我簡(jiǎn)單解釋一下各瀏覽器怎樣理解這三個(gè)屬性：
在FF下，第2、3個(gè)屬性不認(rèn)識(shí)，其中第2個(gè)屬性如果只是加了!important的話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代碼：
代碼如下:
background-color:orange;
*background-color:blue;
_background-color:red;
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(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í)的，可見其大胃王的感覺。另外!important不同，它打破了從上至下的讀取習(xí)慣，使用的是優(yōu)先顯示。而在上述兩個(gè)方案中可以看出FF除了正規(guī)CSS書寫和!important外其它都不認(rèn)識(shí)，標(biāo)準(zhǔn)就是統(tǒng)一的。
在這里并不是慫恿大家鼓勵(lì)使用CSS HACK，只是別看到其他人寫的CSS代碼中有這些HACK不知道是什么意思。畢竟用CSS HACK來(lái)解決瀏覽器間的兼容并不是長(zhǎng)遠(yuǎn)方法，如果新版本瀏覽器的出現(xiàn)說(shuō)不定會(huì)把你原來(lái)寫的CSS HACK怎樣，IE7就是個(gè)很好的例子。盡量達(dá)到零使用CSS HACK或者說(shuō)少使用，因?yàn)楹玫牟季纸Y(jié)構(gòu)是可以很好解決這些問題，這樣的網(wǎng)站也大有人在。
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 www.polareal.com 版權(quán)所有
違法及侵權(quán)請(qǐng)聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬(wàn)商天勤律師事務(wù)所王興未律師提供法律服務(wù)
