IE對標準的支持不夠好導致CSS渲染跟其它瀏覽器有什么不同

2024-07-11 08:29:23

字體：大中小

來源：轉載

供稿：網友

由于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>


<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h3>測試！</h3>
</body>

文字的顏色將是藍色，因為外部樣式的藍色覆蓋了內部樣式的綠色，這在主流瀏覽器中表現都是一致的，包括IE在內。然而另外一種方式插入樣式，IE就表現出它的另類了。這種方法是使用腳本在外部樣式前插入內部樣式，即上面的內部樣式用腳本創建出來，代碼如下：

上一篇：CSS實現圓形放大鏡狙擊鏡效果只有圓圈里的放大

下一篇：CSS技術的出現實現結構與表現分離