關於 IE的文檔模式的指定

IE定義文檔兼容性

文檔兼容性可定義 Internet Explorer 呈現網頁的方式。 本文將介紹文檔兼容性、如何爲網頁指定文檔兼容性模式以及如何確定網頁的文檔模式。

簡介

爲了幫助確保您的網頁在將來的 Internet Explorer 版本中具有一致的外觀,Internet Explorer 8 引入了文檔兼容性。 文檔兼容性是對 Microsoft Internet Explorer 6 中引入的兼容性模式的擴展,使您可以選擇 Internet Explorer 用於顯示網頁的特定呈現模式。

本文將說明文檔兼容性的必要性,列出對近來的 Internet Explorer 版本可用的文檔兼容性模式,並演示如何選擇特定的兼容性模式。

瞭解文檔兼容性的必要性

Internet Explorer 的每個主要版本中都會添加一些功能,旨在使瀏覽器更易於使用、提高安全性以及更緊密地支持行業標準。 隨着 Internet Explorer 的功能不斷增加,將會出現較早的網站可能無法正常顯示的風險。

爲了最大程度地降低這種風險,Internet Explorer 6 允許 Web 開發人員選擇 Internet Explorer 用來解釋和顯示其網頁的方式。 默認爲“Quirks 模式”;在這種模式下,將按照使用較舊的瀏覽器版本查看網頁的方式來顯示網頁。 “標準模式”(也稱爲“嚴格模式”)的特點是可提供對行業標準的最大支持;但是,若要利用此增強的支持,網頁中需要包括適當的<!DOCTYPE> 指令。

如果某個站點未包括 <!DOCTYPE> 指令,則 Internet Explorer 6 將使用 Quirks 模式顯示該站點。 如果某個站點包含有瀏覽器未能識別的有效 <!DOCTYPE> 指令,則 Internet Explorer 6 將使用 Internet Explorer 6 標準模式顯示該站點。 由於已經包含 <!DOCTYPE> 指令的站點很少,因此兼容性模式切換極爲成功。 這樣使 Web 開發人員能夠選擇最佳時間將其站點遷移到標準模式。

隨着時間的推移,許多站點都開始依賴標準模式。 這些站點同時還開始使用 Internet Explorer 6 的功能和行爲來檢測 Internet Explorer。 例如,Internet Explorer 6 並不支持 通用選擇器(可能爲英文網頁);而某些網站將此用作爲 Internet Explorer 提供特定內容的方式。

Internet Explorer 7 提供了通用選擇器支持等新功能,旨在更全面地支持行業標準。 由於 <!DOCTYPE> 指令僅支持 Quirks 模式和標準模式這兩種設置,因此 Internet Explorer 7 標準模式替換了 Internet Explorer 6 標準模式。

結果,依賴於 Internet Explorer 6 標準模式的行爲的站點(如缺乏對通用選擇器的支持)將無法檢測到新版本的瀏覽器。 因此,Internet Explorer 特定的內容不會提供給 Internet Explorer 7,並且這些站點不會按預期顯示。 由於 Internet Explorer 7 僅支持兩種兼容性模式,因此將會迫使受影響站點的所有者更新其站點以支持 Internet Explorer 7。

與任何早期瀏覽器版本相比,Internet Explorer 8 對行業標準提供了更加緊密的支持。 因此,針對舊版本的瀏覽器設計的站點可能不會按預期顯示。 爲了幫助減輕任何問題,Internet Explorer 8 引入了文檔兼容性的概念,從而允許您指定站點所支持的 Internet Explorer 版本。 文檔兼容性在 Internet Explorer 8 中添加了新的模式;這些模式將告訴瀏覽器如何解釋和呈現網站。 如果您的站點在 Internet Explorer 8 中無法正確顯示,則可以更新該站點以支持最新的 Web 標準(首選方式),也可以強制 Internet Explorer 8 按照在舊版本的瀏覽器中查看站點的方式來顯示內容。 通過使用 meta 元素將 X-UA-Compatible 標頭添加到網頁中,可以實現這一點。

這將允許您選擇何時更新站點以支持由 Internet Explorer 8 支持的新功能。

瞭解文檔兼容性模式

Internet Explorer 8 支持很多文檔兼容性模式,這些模式啓用不同的功能並可影響內容的顯示方式。

  • “模仿 IE8”模式將告訴 Internet Explorer 使用 <!DOCTYPE> 指令來確定如何呈現內容。 標準模式指令將以 Internet Explorer 8 標準模式顯示,而 Quirks 模式指令將以 IE5 模式顯示。 與 IE8 模式不同,“模仿 IE8”模式遵循 <!DOCTYPE> 指令。

  • “模仿 IE7”模式將告訴 Internet Explorer 使用 <!DOCTYPE> 指令來確定如何呈現內容。 標準模式指令以 Internet Explorer 7 標準模式顯示,而 Quirks 模式指令以 IE5 模式顯示。 與 IE7 模式不同,“模仿 IE7 模式”遵循 <!DOCTYPE> 指令。 對於很多網站來說,這是首選的兼容性模式。

  • IE5 模式呈現內容的方式如同使用了 Internet Explorer 7 的 Quirks 模式來顯示內容,這與 Internet Explorer 5 顯示內容的方式非常相似。

  • 無論頁面是否包含 <!DOCTYPE> 指令,IE7 模式呈現內容的方式均如同使用了 Internet Explorer 7 的標準模式來顯示內容。

  • IE8 模式可最大程度地支持行業標準(包括 W3C 級聯樣式表級別 2.1 規範(可能爲英文網頁) 萬維網鏈接 和W3C 選擇器 API(可能爲英文網頁) 萬維網鏈接),並提供對 W3C 級聯樣式表級別 3 規範(工作草案)(可能爲英文網頁) 萬維網鏈接 的有限支持。

  • Edge 模式將告訴 Internet Explorer 以可用的最高級別模式顯示內容。 對於 Internet Explorer 8,這等同於 IE8 模式。 假設 Internet Explorer 的將來版本支持更高級別的兼容性模式,那麼,設置爲 Edge 模式的頁面將以該版本支持的最高級別的模式顯示。 當使用 Internet Explorer 8 查看時,這些相同的頁面仍會以 IE8 模式顯示。

由於 Edge 模式的文檔使用查看網頁所用的 Internet Explorer 版本可用的最高級別模式來顯示網頁,因此,建議僅將 Edge 模式用於測試頁面和其他非生產活動。

指定文檔兼容性模式

若要爲網頁指定文檔模式,請使用 meta 元素,以在網頁中包含 X-UA-Compatible http-equiv 標頭。 以下示例指定“模仿 IE7”模式兼容性。

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

content 屬性指定頁面的模式;若要模仿 Internet Explorer 7 的行爲,請指定“IE=EmulateIE7”。 指定“IE=5”、“IE=7”或“IE=8”可選擇相應的兼容性模式。 還可以指定“IE=edge”以告訴 Internet Explorer 8 使用可用的最高級別模式。

X-UA-compatible 標頭不區分大小寫;不過,它必須顯示在網頁中除 title 元素和其他 meta 元素以外的所有其他元素之前的標頭(HEAD 節(可能爲英文網頁))中。

配置 Web 服務器以指定默認兼容性模式

網站管理員可以通過定義站點的自定義標頭,將其站點配置爲默認採用特定的文檔兼容性模式。 具體過程將依您的 Web 服務器而定。 例如,通過以下 web.config 文件,可以讓 Microsoft Internet Information Services (IIS) 定義一個自定義標頭,以便自動按照 IE7 模式呈現所有頁面。

<?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> 

如果使用 Web 服務器指定了默認的文檔兼容性模式,則可通過在特定的網頁中指定不同的文檔兼容性模式來覆蓋默認設置。 在網頁中指定的模式優先於由 Web 服務器指定的模式。

有關如何指定自定義標頭的信息,請查看特定的 Web 服務器的文檔。 或者,訪問以下網頁以獲取詳細信息:

確定文檔兼容性模式

若要確定使用 Internet Explorer 8 的網頁的文本兼容性模式,請使用 document 對象的 documentMode 屬性。 例如,將以下內容鍵入到 Windows Internet Explorer 8 的地址欄中,可顯示當前網頁的文檔模式。

javascript:alert(document.documentMode);

documentMode 屬性將返回一個與頁面的文檔兼容性模式相對應的數值。 例如,如果某個頁面已選擇支持 IE8 模式,則 documentMode 將返回值 8。

在 Internet Explorer 6 中引入的 compatMode 屬性已被棄用,取而代之的是在 Internet Explorer 8 中引入的 documentMode 屬性。當前依賴於 compatMode 的應用程序仍然可以在 Internet Explorer 8 中運行;但是,應將這些應用程序更新爲使用 documentMode。

如果希望使用 JavaScript 來確定文檔的兼容性模式,則應包含支持 Internet Explorer 舊版本的代碼,如以下示例中所示。

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.
}

瞭解 content 屬性值

content 屬性的使用很靈活,它可以接受除前面所述的值之外的值。 這樣,您就能夠更好地控制 Internet Explorer 顯示網頁的方式。 例如,可以將 content 屬性設置爲 IE=7.5。 當您如此設置之後,Internet Explorer 會嘗試將該值轉換爲 版本矢量(可能爲英文網頁),並選擇與轉換結果最接近的模式。 在本例中,Internet Explorer 將會設置爲 IE7 模式。 以下示例顯示了爲其他值選擇的模式(如果不存在其他緩解因素)。

<meta http-equiv="X-UA-Compatible" content="IE=4">   <!-- IE5 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=7.5" > <!-- IE7 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=100" > <!-- IE8 mode -->
<meta http-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 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >    
注意 上一個示例顯示了各個 content 值的結果。 實際上,Internet Explorer 僅遵循網頁中的第一個 X-UA-Compatible 標頭。

還可以使用 content 屬性來指定多個文檔兼容性模式;這將有助於確保網頁在將來的瀏覽器版本中顯示一致。 若要指定多個文檔模式,應設置 content 屬性以標識要使用的各個模式。 各個模式之間使用分號分隔。

如果某個特定的 Internet Explorer 版本支持多個請求的兼容性模式,則該版本將使用標頭的 content 屬性中列出的可用的最高級別模式。 可以利用這一原理來排除特定的兼容性模式,但不建議這樣做。 例如,下面的標頭排除了 IE7 模式。

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

控制默認呈現

當 Internet Explorer 8 遇到未包含 X-UA-Compatible 標頭的網頁時,它將使用 <!DOCTYPE> 指令來確定如何顯示該網頁。 如果該指令丟失或未指定基於標準的文檔類型,則 Internet Explorer 8 將以 IE5 模式(Quirks 模式)顯示該網頁。

如果 <!DOCTYPE> 指令指定了基於標準的文檔類型,則 Internet Explorer 8 將以 IE8 模式顯示該網頁,但出現以下情況時除外:

  • 爲該網頁啓用了兼容性視圖。

  • 該網頁是在 Intranet 區域中加載的,並且已將 Internet Explorer 8 配置爲使用兼容性視圖來顯示 Intranet 區域中的網頁。

  • 已將 Internet Explorer 8 配置爲使用兼容性視圖來顯示所有網站。

  • 已將 Internet Explorer 8 配置爲使用兼容性視圖列表(其中指定了一組始終使用兼容性視圖顯示的網站)。

  • 已使用開發人員工具覆蓋在該網頁中指定的設置。

  • 該網頁遇到了頁面佈局錯誤,並且已將 Internet Explorer 8 配置爲,通過在兼容性視圖中重新打開網頁來自動從此類錯誤中恢復。

有關詳細信息,請參見 Internet Explorer 博客: 兼容性視圖概述(可能爲英文網頁) 萬維網鏈接

注意 如果將 Internet Explorer 配置爲使用兼容性視圖加載 Intranet 頁面,Internet Explorer 將對使用 localhost 地址或 環回地址(可能爲英文網頁)加載的頁面引發異常。 如果 <!DOCTYPE> 指令指定基於標準的文檔類型,則將以 IE8 模式顯示使用這些技術加載的頁面。

此外,可以使用下面的註冊表項來控制 Internet Explorer 對未包含 X-UA-Compatible 標頭的頁面的處理方式。

HKEY_LOCAL_MACHINE (or HKEY_CURRENT_USER) 
SOFTWARE 
Microsoft 
Internet Explorer 
Main 
FeatureControl 
FEATURE_BROWSER_EMULATION 
iexplore.exe = (DWORD)

DWORD 值必須等於下列值之一。

說明
7000 包含基於標準的 <!DOCTYPE> 指令的頁面將以 IE7 模式顯示。
8000 包含基於標準的 <!DOCTYPE> 指令的頁面以 IE8 模式顯示。
8888 頁面始終以 IE8 模式顯示,而不考慮 <!DOCTYPE> 指令。 (這可繞過前面列出的例外情況。)

默認情況下,承載 WebBrowser 控件(可能爲英文網頁)的應用程序將以 IE7 模式打開基於標準的頁面,除非頁面中包含適當的 X-UA-Compatible 標頭。 通過將應用程序可執行文件的名稱添加到 FEATURE_BROWSER_EMULATION 功能控制項中,並相應地設置值,可以更改打開模式。

總結

對於 Web 設計人員來說,兼容性是一個要考慮的重要問題。 儘管最好是創建不依賴於 Web 瀏覽器的特定行爲或功能的站點,但有時這樣做是不可能的。 文檔兼容性模式將網頁與 Internet Explorer 特定版本的行爲相關聯。

使用 X-UA-Compatible 標頭可指定頁面支持的 Internet Explorer 版本。 使用 document.documentMode 可確定網頁的兼容性模式。

通過選擇支持特定的 Internet Explorer 版本,可有助於確保頁面在將來的瀏覽器版本中能夠顯示一致。

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