讓你的網站支持IE 8:使用X-UA-Compatible來設置IE8兼容模式

時間 2021-08-14

標籤 javascript css html java css3 web api 瀏覽器安全服務器欄目網站開發简体版

原文原文鏈接

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

前言

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

瞭解文件兼容性的必要性

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

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

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

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

當 IE7增長了對全域選擇器的支持，那些依賴IE6特色的網站便沒法偵測出這個新版本的瀏覽器。所以那些針對IE的特定對應沒法應用於IE7，形成這些網站便沒法如他們預期的顯示。因爲只支持兩種兼容性模式，受到影響的網站擁有者被迫更新他們的網站使其能支持IE7。

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

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

認識文件兼容性模式

IE8支持幾種文件兼容性模式，它們具備不一樣的特性並影響內容顯示的方式。

•Emulate IE8 mode指示IE使用指令來決定如何編譯內容。Standards mode指令會顯示成IE8 Standards mode而quirks mode會顯示成IE5 mode。不一樣於IE8 mode，Emulate IE8 mode重視指令。
•Emulate IE7 mode指示IE使用指令來決定如何編譯內容。Standards mode指令會顯示成IE7 Standards mode而quirks mode會顯示成IE5 mode。不一樣於IE7 mode，Emulate IE7 mode重視指令。對於許多網頁來講這是最推薦的兼容性模式。
•IE5 mode 編譯內容如同IE7的quirks mode之顯示情況，和IE5中顯示的很是相似。
•IE7 mode編譯內容如同IE7的standards mode之顯示情況，不管網頁是否含有指令。
•IE8 mode提供對業界標準的最高支持，包含 W3C Cascading Style Sheets Level 2.1 Specification和 W3C 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 >
   
   < meta http-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 />
        <add name="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。下面的範例顯示該模式設定爲其餘值的情況。

< meta http-equiv ="X-UA-Compatible" content ="IE=4" >     
< meta http-equiv ="X-UA-Compatible" content ="IE=7.5" > 
< meta http-equiv ="X-UA-Compatible" content ="IE=100" > 
< meta http-equiv ="X-UA-Compatible" content ="IE=a" >     


< meta http-equiv ="X-UA-Compatible" content ="IE=EmulateIE7" >

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

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

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

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

結論

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

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

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