由於IE系瀏覽器對標準的支援不夠好，導致Web開發中經常需要去處理瀏覽器安全色性問題，特別有些莫名其妙的問題很讓人頭疼，今天要說這個問題就是這樣的，先從插入CSS的三種方法說起：
外部樣式（External Style Sheet）
當樣式需要應用於很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個檔案來改變整個網站的外觀。每個頁面使用 <link> 標籤連結到樣式表。<link> 標籤在（文檔的）頭部：
<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>
內部樣式（Internal Style Sheet）
當單個文檔需要特殊的樣式時，就應該使用內部樣式表。你可以使用 <style> 標籤在文檔頭部定義內部樣式表，就像這樣:
<head><style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");}</style></head>
內聯樣式（Inline Styles）
由於要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法，例如當樣式僅需要在一個元素上應用一次時。要使用內聯樣式，你需要在相關的標籤內使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性。
<p style="color: sienna; margin-left: 20px">This is a paragraph</p>
多重樣式（Multiple Styles）
如果外部樣式、內部樣式和內聯樣式同時應用於同一個元素，就是使多重樣式的情況，一般情況下優先順序如下：
（外部樣式）External style sheet <（內部樣式）Internal style sheet <（內聯樣式）Inline style
之所以說是一般情況是因為可以使用!important來改變這種順序，比如外部樣式如果某個樣式項使用了!important來提高優先順序，其優先順序將比內聯樣式高。還有個例外的情況就是如果外部樣式放在內部樣式的後面，則外部樣式將覆蓋內部樣式：
<head><!--內部樣式--><style>h3{color:green;}</style><!--外部樣式style.css--><!--h3{color:blue;}--><link rel="stylesheet" type="text/css" href="style.css"/></head><body><h3>測試！</h3></body>
文字的顏色將是藍色，因為外部樣式的藍色覆蓋了內部樣式的綠色，這在主流瀏覽器中表現都是一致的，包括IE在內。然而另外一種方式插入樣式，IE就表現出它的另類了。這種方法是使用指令碼在外部樣式前插入內部樣式，即上面的內部樣式用指令碼建立出來，代碼如下：
(function(){var agent = window.navigator.userAgent.toLowerCase();var is_op = (agent.indexOf("opera") != -1);var is_ie = (agent.indexOf("msie") != -1) && document.all && !is_op;var is_ch = (agent.indexOf("chrome") != -1);var cssStr="h3 {color:green;}";var s=document.createElement("style");var head=document.getElementsByTagName("head").item(0);var link=document.getElementsByTagName("link");link=link.item(0);if(is_ie){if(link)head.insertBefore(s,link);elsehead.appendChild(s);document.styleSheets.item(document.styleSheets.length-1).cssText=cssStr;}else if(is_ch){var t=document.createTextNode();t.nodeValue=cssStr;s.appendChild(t);head.insertBefore(s,link);}else{s.innerHTML=cssStr;head.insertBefore(s,link);}})();
在Firefox/Chrome/Safari/Opera中測試文字都是藍色的，符合內部樣式如果插入到外部樣式前的話，外部樣式將覆蓋內部樣式的原則，然而在IE下卻是綠色的，也就是說IE在載入完頁面文檔，運行了指令碼插入了內部樣式之後，就把文字顏色設定成綠色了而忽略了後面外部樣式。不知道大家是否也碰到這樣的問題，歡迎討論......
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
