深入剖析IE8文件兼容性問題

作者：張慶 2010-09-15 10:39:27

開發前端

IE8文件兼容性用于定義讓IE如何編譯你的網頁。本文向大家解釋一下IE8文件兼容性，如何指定你網站的IE8文件兼容性模式以及如何判斷一個網頁該使用的文件模式。

本文向大家描述一下IE8樣式兼容性適應方法，為了幫助確保你的網頁在所有未來的IE版本都有一致的外觀，IE8引入了IE8文件兼容性。在IE6中引入一個增設的兼容性模式，IE8文件兼容性使你能夠在IE呈現你的網頁時選擇特定編譯模式。

IE8樣式兼容性適應方法

前言

為了幫助確保你的網頁在所有未來的IE版本都有一致的外觀，IE8引入了IE8文件兼容性。在IE6中引入一個增設的兼容性模式，IE8文件兼容性使你能夠在IE呈現你的網頁時選擇特定編譯模式。

新的IE為了確保網頁在未來的版本中都有一支的外觀，IE8引入了IE8文件兼容性。當你引入一個增設的兼容性模式，此文章說明IE8文件兼容性的必要性，列出現有版本IE能使用的IE8文件兼容性模式并示范如何選擇特定的兼容性模式。

了解IE8文件兼容性的必要性

每個主要版本IE新增的功能都是為了讓瀏覽器更容易使用、增加安全性及更支持業界標準。以這些作為IE的特色，其中一個風險就是舊版本網站無法正確的顯示。

為了將這個風險降到***，IE6允許網頁開發人員選擇IE編譯和顯示他們網頁的方式。"Quirksmode"為預設，這會使頁面以舊版本瀏覽器的視點顯示，"Standardsmode"(也稱為"strictmode")特點是支持業界標準最為完善。然而要利用這個增強的支持功能，網頁必須包含恰當的<!DOCTYPE>指令。

若一個網頁沒有包含<!DOCTYPE>指令，IE6會將它以quirksmode顯示。若網頁包含有效的<!DOCTYPE>指令但瀏覽器無法辨識，IE6會將它以IE6standardsmode顯示。因為少數網站已經包含<!DOCTYPE>指令，兼容性模式的切換相當成功。這使網頁開發人員能選擇將他們的網頁轉移為standardsmode的***時機。

隨著時間經過，更多網站開始使用standardsmode。它們也開始使用IE6的特性和功能來檢測IE。舉例來說，IE6不支持universalselector(即css之全局選擇器*{})，一些網站便使用它來針對IE做特定的對應。

當IE7增加了對全域選擇器的支持，那些依賴IE6特點的網站便無法偵測出這個新版本的瀏覽器。因此那些針對IE的特定對應無法應用于IE7，造成這些網站便無法如他們預期的顯示。由于<!DOCTYPE>只支持兩種兼容性模式，受到影響的網站擁有者被迫更新他們的網站使其能支持IE7。

IE8比之前的任何版本瀏覽器都更支持業界標準，因此針對舊版本瀏覽器設計的網頁可能無法如預期般呈現。為了幫助減輕所有問題，IE8引入IE8文件兼容性的概念，使你能選擇你的網頁設計要對應的特定IE版本。IE8文件兼容性在IE8增加了一些新的模式，這些模式能告訴瀏覽器如何解析和編譯一個網頁。若你的網頁無法在ie8正確的顯示，你可以更新你的網站使它支持***的網頁標準(優先選項)或在你的頁面上新增一個meta元素用于告訴IE8如何依照舊版本瀏覽器編譯你的頁面。這能讓你選擇將你的網站更新支持IE8新特點的時機。

認識IE8文件兼容性模式

IE8支持幾種IE8文件兼容性模式，它們具有不同的特性并影響內容顯示的方式。

◆-EmulateIE8mode指示IE使用<!DOCTYPE>指令來決定如何編譯內容。Standardsmode指令會顯示成IE8Standardsmode而quirksmode會顯示成IE5mode。不同于IE8mode，EmulateIE8mode重視<!DOCTYPE>指令。

◆-EmulateIE7mode指示IE使用<!DOCTYPE>指令來決定如何編譯內容。Standardsmode指令會顯示成IE7Standardsmode而quirksmode會顯示成IE5mode。不同于IE7mode，EmulateIE7mode重視<!DOCTYPE>指令。對于許多網頁來說這是最推薦的兼容性模式。
-IE5mode編譯內容如同IE7的quirksmode之顯示狀況，和IE5中顯示的非常類似。

◆-IE7mode編譯內容如同IE7的standardsmode之顯示狀況，無論網頁是否含有<!DOCTYPE>指令。

◆-IE8mode提供對業界標準的***支持，包含W3CCascadingStyleSheetsLevel2.1Specification和W3CSelectorsAPI，并有限的支持W3CCascadingStyleSheetsLevel3Specification(WorkingDraft)。

◆-Edgemode指示IE以目前可用的***模式顯示內容。當使用IE8時其等同于IE8mode。若(假定)未來放出支持更高兼容性模式的IE，使用Edgemode的頁面會使用該版本能支持的***模式來顯示內容。同樣的那些頁面在使用IE8瀏覽時仍會照常顯示。

由于edgemode使用該IE版本所能支持的***模式來顯示所瀏覽的網頁內容，建議僅使用于測試頁及其他非商用頁面。#p#

指定IE8文件兼容性模式

要為你的網頁指定文件模式，需要在你的網頁中使用meta元素放入X-UA-Compatiblehttp-equiv標頭。以下是指定為EmulateIE7mode兼容性之范例。

<html> 
<head> 
<!--MimicInternetExplorer7--> 
<metahttp-equivmetahttp-equiv="X-UA-Compatible"content="IE=EmulateIE7"/> 
<title>MyWebPage</title> 
</head> 
<body> 
<p>Contentgoeshere.</p> 
</body> 
</html>

其內容隨著指定的頁面模式而更改，當要模擬IE7時，指定IE=EmulateIE7，指定IE=5,IE=7,或IE=8來選擇其中一種兼容性模式。你也可以指定IE=edge來指示IE8使用它支持的***模式。

X-UA-compatible標頭沒有大小寫之分。然而除了title元素及其他的meta元素之外，它必須出現在網頁header節其它元素之前的位置，

設定網站服務器以指定預設兼容性模式

網站管理員可籍著為網站定義一個自訂標頭來為他們的網站預設一個特定的IE8文件兼容性模式。這個特定的方法取決于你的網站服務器。舉例來說，下列的web.config文件使MicrosoftInternetInformationServices(IIS)能定義一個自訂標頭以自動使用IE7mode來編譯所有網頁。

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<configuration> 
<system.webServer> 
<httpProtocol> 
<customHeaders> 
<clear/> 
<addnameaddname="X-UA-Compatible"value="IE=EmulateIE7"/> 
</customHeaders> 
</httpProtocol> 
</system.webServer> 
</configuration>

若你已于網站服務器指定了一個預設的IE8文件兼容性模式，你可以在個別頁面上指定不同的IE8文件兼容性模式來蓋過它。在網頁中指定的模式優先權高于服務器中所指定的模式。

判定IE8文件兼容性模式

要判定網頁使用IE8瀏覽時的IE8文件兼容性模式，使用documentobject(文檔對象)的documentMode功能。例如在IE8的網址列輸入下列程式碼會顯示目前頁面的文件模式。

javascript:alert(document.documentMode);

documentMode功能會回傳一個數值對應目前頁面的IE8文件兼容性模式，舉例來說，若網頁指定為支持IE8模式，documentMode便會回傳值"8"。

在IE6引入的compatMode功能不支持在IE8引入的documentMode功能。目前使用compatMode建立的應用程式還能在IE8中作用，但它們必須更新為使用documentMode。

若你希望使用JavaScript判定一個文件的兼容性模式，引入下面范例的這段程式碼可支持舊版本的IE。

engine=null;  
if(window.navigator.appName=="MicrosoftInternetExplorer")  
{  
//ThisisanIEbrowser.Whatmodeistheenginein?  
if(document.documentMode)//IE8  
engine=document.documentMode;  
else//IE5-7  
{  
engine=5;//Assumequirksmodeunlessprovenotherwise  
if(document.compatMode)  
{  
if(document.compatMode=="CSS1Compat")  
engine=7;//standardsmode  
}  
}  
//theenginevariablenowcontainsthedocumentcompatibilitymode.  
}

#p#認識內容屬性值

內容屬性值在接收到異于先前敘述的數值時是具有彈性的。這能使你對于IE如何顯示你的網頁更有操控性。舉例來說，你可以設定內容屬性值為IE=7.5。當你這樣做的時候，IE嘗試將這個值轉換為versionvector并選擇最接近的結果。在這個例子中，IE會將其設定為IE7mode。下面的范例顯示該模式設定為其他值的狀況。

<metahttp-equivmetahttp-equiv="X-UA-Compatible"content="IE=4"><!--IE5mode--> 
<metahttp-equivmetahttp-equiv="X-UA-Compatible"content="IE=7.5"><!--IE7mode--> 
<metahttp-equivmetahttp-equiv="X-UA-Compatible"content="IE=100"><!--IE8mode--> 
<metahttp-equivmetahttp-equiv="X-UA-Compatible"content="IE=a"><!--IE5mode--> 
 
<!--ThisheadermimicsInternetExplorer7anduses  
<!DOCTYPE>todeterminehowtodisplaytheWebpage--> 
<metahttp-equivmetahttp-equiv="X-UA-Compatible"content="IE=EmulateIE7">

注意:前面的范例顯示單獨的內容值。實際上IE只會執行網頁中***個X-UA-Compatible標頭。

你也可以使用內容屬性來指定復數的IE8文件兼容性模式，這能幫助確保你的網頁在未來的瀏覽器版本都能一致的顯示。欲設定復數的文件模式，請設定內容屬性以判別你想使用的模式。使用分號來分開各個模式。

如果一個特定版本的IE支持所要求的兼容性模式多于一種，將採用列于標頭內容屬性中***的可用模式。你可以使用這個特性來排除特定的兼容性模式，雖然并不推薦這樣做。舉例來說，下列標頭即會排除IE7mode。

<metahttp-equivmetahttp-equiv="X-UA-Compatible"content="IE=5;IE=8"/>

結論

兼容性對于網頁設計師來說是非常重要的顧慮。雖然***是可以建立一個完全不需依賴任何網頁瀏覽器特性或功能的網站，有時候這是不可能實現的。IE8文件兼容性模式便能將網頁限制在某個特定版本的IE中。

使用X-UA-Compatible標頭來指定你的頁面支持的IE版本。使用document.documentMode判定頁面的兼容性模式。

選擇支持某個特定版本的IE，你可以確保你的頁面在未來的瀏覽器版本中也能有顯示的一致性。

【編輯推薦】

IE8文件兼容性問題詳解
JavaScript代碼輕松實現DIV圓角
網頁排版中IE6，IE7，Firefox瀏覽器兼容性寫法
CSS屬性display:inline-block使用揭秘
Firefox、IE7、IE6瀏覽器兼容問題概念解析

責任編輯：佚名來源： csdn.net

IE8文件兼容性