由於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在載入完頁面文檔,運行了指令碼插入了內部樣式之後,就把文字顏色設定成綠色了而忽略了後面外部樣式。不知道大家是否也碰到這樣的問題,歡迎討論......