由于IE系瀏覽器對標(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)樣式會損失掉樣式表的許多優(yōu)勢。請慎用這種方法，例如當(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)先級如下：
�。ㄍ獠繕邮剑〦xternal style sheet <（內(nèi)部樣式）Internal style sheet <（內(nèi)聯(lián)樣式）Inline style
之所以說是一般情況是因?yàn)榭梢允褂?important來改變這種順序，比如外部樣式如果某個(gè)樣式項(xiàng)使用了!important來提高優(yōu)先級，其優(yōu)先級將比內(nèi)聯(lián)樣式高。還有個(gè)例外的情況就是如果外部樣式放在內(nèi)部樣式的后面，則外部樣式將覆蓋內(nèi)部樣式：
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>測試！</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);
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中測試文字都是藍(lán)色的，符合外部樣式如果插入到內(nèi)部樣式前的話，外部樣式將覆蓋內(nèi)部樣式的原則，然而在IE下卻是綠色的，也就是說IE在加載完頁面文檔，運(yùn)行了腳本插入了內(nèi)部樣式之后，就把文字顏色設(shè)置成綠色了而忽略了后面外部樣式。不知道大家是否也碰到這樣的問題，歡迎討論......
喜歡 
頂
難過
囧
圍觀
無聊
