IE中奇怪的應(yīng)用CSS的BUG

.mesh格式文件查看(CEGui Mesh Viewer)1.0.6 官方最新版

類型：圖像瀏覽大小：13.0M語言：英文評(píng)分：3.6
標(biāo)簽：

立即下載

　由于IE系瀏覽器對(duì)標(biāo)準(zhǔn)的支持不夠好，導(dǎo)致Web開發(fā)中經(jīng)常需要去處理瀏覽器兼容性問題，特別有些莫名其妙的問題很讓人頭疼，今天要說這個(gè)問題就是這樣的，先從插入CSS的三種方法說起：

外部樣式（External Style Sheet）

　　當(dāng)樣式需要應(yīng)用于很多頁面時(shí)，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個(gè)文件來改變整個(gè)站點(diǎn)的外觀。每個(gè)頁面使用 <link> 標(biāo)簽鏈接到樣式表。<link> 標(biāo)簽在（文檔的）頭部：

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)部樣式表，就像這樣:

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 屬性。

1 <p style="color: sienna; margin-left: 20px">This is a paragraph</p>

多重樣式（Multiple Styles）

　　如果外部樣式、內(nèi)部樣式和內(nèi)聯(lián)樣式同時(shí)應(yīng)用于同一個(gè)元素，就是使多重樣式的情況，一般情況下優(yōu)先級(jí)如下：

　�。ㄍ獠繕邮剑〦xternal 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)部樣式：

01 <head>

02

03 <style>

04 h3{color:green;}

05 </style>

07

08

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)建出來，代碼如下：

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);

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);

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è)置成綠色了而忽略了后面外部樣式。不知道大家是否也碰到這樣的問題，歡迎討論......