使用X-UA-Compatible來設置IE瀏覽器兼容模式

文件兼容性用於定義讓IE如何編譯你的網頁。此文件解釋文件兼容性,如何指定你網站的文件兼容性模式以及如何判斷一個網頁該使用的文件模式。


前言

爲了幫助確保你的網頁在所有未來的IE版本都有一致的外觀,IE8引入了文件兼容性。在IE6中引入一個增設的兼容性模式,文件兼容性使你能夠在IE呈現你的網頁時選擇特定編譯模式。
新的IE爲了確保網頁在未來的版本中都有一支的外觀,IE8引入了文件兼容性。當你引入一個增設的兼容性模式,
此文章說明文件兼容性的必要性,列出現有版本IE能使用的文件兼容性模式並示範如何選擇特定的兼容性模式。


瞭解文件兼容性的必要性

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

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

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

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

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

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

這能讓你選擇將你的網站更新支持IE8新特點的時機。


認識文件兼容性模式

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

Emulate IE8 mode指示IE使用<!DOCTYPE>指令來決定如何編譯內容。Standards  mode指令會顯示成IE8 Standards mode而quirks mode會顯示成IE5 mode。不同於IE8 mode,Emulate IE8  mode重視<!DOCTYPE>指令。
Emulate IE7  mode指示IE使用<!DOCTYPE>指令來決定如何編譯內容。Standards mode指令會顯示成IE7  Standards mode而quirks mode會顯示成IE5 mode。不同於IE7 mode,Emulate IE7  mode重視<!DOCTYPE>指令。對於許多網頁來說這是最推薦的兼容性模式。
IE5 mode 編譯內容如同IE7的quirks mode之顯示狀況,和IE5中顯示的非常類似。
IE7 mode編譯內容如同IE7的standards  mode之顯示狀況,無論網頁是否含有<!DOCTYPE>指令。
IE8  mode提供對業界標準的最高支持,包含 W3C Cascading Style Sheets Level 2.1 SpecificationW3C Selectors  API,並有限的支持 W3C Cascading Style Sheets Level 3 Specification (Working  Draft)
Edge mode指示IE以目前可用的最高模式顯示內容。當使用IE8時其等同於IE8  mode。若(假定)未來放出支持更高兼容性模式的IE,使用Edge  mode的頁面會使用該版本能支持的最高模式來顯示內容。同樣的那些頁面在使用IE8瀏覽時仍會照常顯示。

由於edge mode使用該IE版本所能支持的最高模式來顯示所瀏覽的網頁內容,建議僅使用於測試頁及其他非商用頁面。


指定文件兼容性模式

要爲你的網頁指定文件模式,需要在你的網頁中使用meta元素放入X-UA-Compatible http-equiv 標頭。以下是指定爲Emulate IE7 mode 兼容性之範例。

<html>
<head>
<!--Mimic Internet Explorer 7-->
<metahttp-equiv="X-UA-Compatible"content="IE=EmulateIE7"/>
<title>My Web  Page</title>
</head>
<body>
<p>Content  goes here.</p>
</body>
</html>


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

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


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

網站管理員可籍着爲網站定義一個自訂標頭來爲他們的網站預設一個特定的文件兼容性模式。這個特定的方法取決於你的網站服務器。舉例來說,下列的web.config文件使Microsoft  Internet Information Services (IIS)能定義一個自訂標頭以自動使用IE7 mode來編譯所有網頁。

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


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

請查閱你的網站服務器關於指定自訂標頭的資訊,或看更多資料:

Implementing the META Switch on Apache
Implementing the META Switch on IIS


判定文件兼容性模式

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

javascript:alert(document.documentMode);

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

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

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

engine = null;
if (window.navigator.appName == "Microsoft  Internet Explorer")
{
//This is  an IE browser. What mode is the engine in?
if (document.documentMode) //IE8
engine= document.documentMode;
else//IE  5-7
{
engine= 5; //Assume  quirks mode unless proven otherwise
if (document.compatMode)
{
if (document.compatMode == "CSS1Compat")
engine= 7; //standards mode
}
}
//the  engine variable now contains the document compatibility mode.
}

認識內容屬性值

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

<metahttp-equiv="X-UA-Compatible"content="IE=4"><!--IE5  mode-->
<metahttp-equiv="X-UA-Compatible"content="IE=7.5"><!--IE7  mode-->
<metahttp-equiv="X-UA-Compatible"content="IE=100"><!--IE8  mode-->
<metahttp-equiv="X-UA-Compatible"content="IE=a"><!--IE5  mode-->

<!--This header mimics Internet Explorer 7 and  uses
<!DOCTYPE>  to determine how to display the Web page
-->
<metahttp-equiv="X-UA-Compatible"content="IE=EmulateIE7">

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

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

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

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

結論

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

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

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


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章