分析IE中應(yīng)用CSS的一些BUG

2020-03-24 18:27:48

字體：大中小

供稿：網(wǎng)友

雖然IE瀏覽器占有很大的市場(chǎng)份額，但是由于IE瀏覽器對(duì)標(biāo)準(zhǔn)的支持不夠好，導(dǎo)致Web開發(fā)中經(jīng)常需要去處理瀏覽器兼容性問題，本文和你一起分析一下IE中應(yīng)用CSS可能出現(xiàn)的一些BUG，今天要說這個(gè)問題就是這樣的，先從插入CSS的三種方法說起：外部樣式（External Style Sheet）當(dāng)樣式需要應(yīng)用于很多頁面時(shí)，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個(gè)文件來改變整個(gè)站點(diǎn)的外觀。每個(gè)頁面使用 link 標(biāo)簽鏈接到樣式表。 link 標(biāo)簽在（文檔的）頭部：view sourceprint?
1 head 2 link rel="stylesheet" type="text/css" href="mystyle.css" / 3 /head
內(nèi)部樣式（Internal Style Sheet）當(dāng)單個(gè)文檔需要特殊的樣式時(shí)，就應(yīng)該使用內(nèi)部樣式表。你可以使用 style 標(biāo)簽在文檔頭部定義內(nèi)部樣式表，就像這樣:view sourceprint?
1 head 2 style type="text/css" 3 hr {color: sienna;} 4 p {margin-left: 20px;} 5 body {background-image: url("images/back40.gif");} 6 /style 7 /head
內(nèi)聯(lián)樣式（Inline Styles）由于要將表現(xiàn)和內(nèi)容混雜在一起，內(nèi)聯(lián)樣式會(huì)損失掉樣式表的許多優(yōu)勢(shì)。請(qǐng)慎用這種方法，例如當(dāng)樣式僅需要在一個(gè)元素上應(yīng)用一次時(shí)。要使用內(nèi)聯(lián)樣式，你需要在相關(guān)的標(biāo)簽內(nèi)使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性。view sourceprint?
1 p This is a paragraph /p
多重樣式（Multiple Styles）如果外部樣式、內(nèi)部樣式和內(nèi)聯(lián)樣式同時(shí)應(yīng)用于同一個(gè)元素，就是使多重樣式的情況，一般情況下優(yōu)先級(jí)如下：（外部樣式）External style sheet （內(nèi)部樣式）Internal style sheet （內(nèi)聯(lián)樣式）Inline style 之所以說是一般情況是因?yàn)榭梢允褂?important來改變這種順序，比如外部樣式如果某個(gè)樣式項(xiàng)使用了!important來提高優(yōu)先級(jí)，其優(yōu)先級(jí)將比內(nèi)聯(lián)樣式高。還有個(gè)例外的情況就是如果外部樣式放在內(nèi)部樣式的后面，則外部樣式將覆蓋內(nèi)部樣式：view sourceprint?
01 head 02 !--內(nèi)部樣式-- 03 style 04 h3{color:green;} 05 /style 06 07 !--外部樣式style.css-- 08 !--h3{color:blue;}-- 09 link rel="stylesheet" type="text/css" href="style.css"/ 10 /head 11 body 12 h3 測(cè)試！ /h3 13 /body
文字的顏色將是藍(lán)色，因?yàn)橥獠繕邮降乃{(lán)色覆蓋了內(nèi)部樣式的綠色，這在主流瀏覽器中表現(xiàn)都是一致的，包括IE在內(nèi)。然而另外一種方式插入樣式，IE就表現(xiàn)出它的另類了。這種方法是使用腳本在外部樣式前插入內(nèi)部樣式，即上面的內(nèi)部樣式用腳本創(chuàng)建出來，代碼如下：view sourceprint?
01 (function(){ 02 var agent = window.navigator.userAgent.toLowerCase(); 03 var is_op = (agent.indexOf("opera") != -1); 04 var is_ie = (agent.indexOf("msie") != -1) document.all !is_op; 05 var is_ch = (agent.indexOf("chrome") != -1); 06 07 var cssStr="h3 {color:green;}"; 08 var s=document.createElement("style"); 09 var head=document.getElementsByTagName("head").item(0); 10 var link=document.getElementsByTagName("link"); 11 link=link.item(0); 12 13 if(is_ie) 14 { 15 if(link) 16 head.insertBefore(s,link); 17 else 18 head.appendChild(s); 19 document.styleSheets.item(document.styleSheets.length-1).cssText=cssStr; 20 } 21 else if(is_ch) 22 { 23 var t=document.createTextNode(); 24 t.nodeValue=cssStr; 25 s.appendChild(t); 26 head.insertBefore(s,link); 27 } 28 else 29 { 30 s.innerHTML=cssStr; 31 head.insertBefore(s,link); 32 } 33 })();
在Firefox/Chrome/Safari/Opera中測(cè)試文字都是藍(lán)色的，符合外部樣式如果插入到內(nèi)部樣式前的話，外部樣式將覆蓋內(nèi)部樣式的原則，然而在IE下卻是綠色的，也就是說IE在加載完頁面文檔，運(yùn)行了腳本插入了內(nèi)部樣式之后，就把文字顏色設(shè)置成綠色了而忽略了后面外部樣式。不知道大家是否也碰到這樣的問題
html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：怎樣用DIV和CSS做導(dǎo)航條

下一篇：CSS濾鏡效果之雷達(dá)屏幕