定義文檔兼容性，讓IE按指定的版本解析咱們的頁面

時間 2021-08-14

標籤 html 前端 web ajax chrome api 瀏覽器服務器 asp.net ide 欄目 HTML 简体版

原文原文鏈接

做爲開發人員，特別是做爲Web的前端開發人員，最悲催的莫過於要不斷的，不斷的去調試各類瀏覽器的顯示效果，而這其中最讓人頭痛的莫過於MS下的IE系列瀏覽器，在IE系列中的調試咱們將會發現沒有一個是好伺候的，因而不得不學習各類Hack技術來知足各類瀏覽器之間的兼容。在這種痛苦中不斷的掙扎，MS可能也實在是看不下去了，因而在IE8開始，微軟引入了文檔兼容性，而這，終於可讓前端的開發人員稍微可以喘口氣。前端

文檔兼容性是對 Microsoft Internet Explorer 6 中引入的兼容性模式的擴展，使您能夠選擇 Internet Explorer 用於顯示網頁的特定呈現模式。——微軟的官方文檔。web

在這裏先介紹兩個概念：瀏覽器模式(browser mode)和文檔模式(document mode)。這兩個模式的引入，讓咱們在IE瀏覽器上可以簡單的處理兼容性問題，固然，其實也並不簡單，先看看這兩個概念的定義：ajax

瀏覽器模式（browser mode）：於切換IE針對該網頁的默認文檔模式、對不一樣版本瀏覽器的條件備註解析、發送給網站服務器的用戶代理（User-Agent）字符串的值。網站能夠根據瀏覽器返回的不一樣用戶代理字符串判斷瀏覽器的版本和安裝的功能，這樣就能夠向不一樣的瀏覽器返回不一樣的頁面內容。chrome

默認狀況下，IE8的瀏覽器模式爲IE8。用戶能夠經過單擊地址欄旁邊的兼容性視圖按鈕來手動切換到不一樣的瀏覽器模式。在IE8中，IE8兼容性視圖會以IE7文檔模式來顯示網頁，同時會向服務器發送IE7的用戶代理字符串。api

文檔模式（document mode）：用於指定IE的頁面排版引擎（Trident）以哪一個版本的方式來解析並渲染網頁代碼。切換文檔模式會致使網頁被刷新，但不會更改用戶代理字符串中的版本號，也不會從服務器從新下載網頁。切換瀏覽器模式的同時，瀏覽器也會自動切換到相應的文檔模式。瀏覽器

簡而言之：瀏覽器模式的改變，可以改變請求中User Agent的值，讓服務器獲取後，可以按照UA的值進行對應處理（若是服務器上有這個處理功能）。而文檔模式的改變只反映在本地的瀏覽器解析HTML上，對客戶端顯示會有影響，而對服務器透明。同時，修改瀏覽器模式會影響文檔模式，反之卻不成立。服務器

使用文檔兼容性的方法比較容易，就是在咱們要反饋給客戶端的HTML代碼中的head中添加一個meta元素，用來描述當前的文檔須要使用何種瀏覽器版原本解釋當前文檔，代碼相似下面這樣：asp.net

<html>
<head>
  <!-- Mimic Internet Explorer 7 -->
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
  <title>測試模擬IE7瀏覽模式</title>
</head>
<body>
  <!--這裏是你網站的內容-->
</body>
</html>

X-UA-compatible在使用中，大小寫不敏感，若是你須要客戶端模擬其餘的瀏覽器版原本解析文檔你能夠設置爲對應的版本便可，一般的設置有以下幾種：ide

文檔兼容性設置 X-UA-compatible
X-UA-Compatible值	說明
IE=5	讓瀏覽器使用Quirks mode來顯示，其實是使用Internet Explorer 7 的 Quirks 模式來顯示內容，這個模式和IE5很是類似。
IE=edge	這個設置是讓IE使用當前的最高版本進行文檔的解析，官方文檔指明，edge模式僅適用在測試環境，不建議在生產環境中使用
IE=7	使用標準IE7來處理
IE=EmulateIE7	模擬IE7來處理，遵循 <!DOCTYPE> 指令，若是文檔有當前有一個合法的<!DOCTYPE>，就使用IE7模式，否者使用Quirks模式（Internet Explorer 5 Quirks），對於大部分網站來講，這是首選的兼容性模式
IE=8	標準IE8
IE=EmulateIE8	模擬IE8，遵循 <!DOCTYPE> 指令，參照IE=EmulateIE7說明
IE=9	標準IE9
IE=EmulateIE9	模擬IE9，遵循 <!DOCTYPE> 指令，參照IE=EmulateIE7說明
chrome=1	強制使用Chrome，須要IE下Chrome插件支持
IE=EmulateIE10	模擬IE10
IE=10	標準IE10，遵循 <!DOCTYPE> 指令，參照IE=EmulateIE7說明

固然，除了這以外，你還能夠設置其餘值，甚至能夠是7.5這樣的數值（我的不建議），IE解釋的時候，會嘗試將數值轉爲最接近的版本。chrome 這個是使用Chrome插件來處理當前的文檔內容，你也能夠在HTML中插入下面的代碼，以便在用戶沒有安裝Chrome插件的時候，提醒用戶：

<script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
 <!--在須要使用的地方進行Chrome Check--><script>CFInstall.check();</script>

這樣在用戶訪問的時候，若是發現沒有安裝Chrome插件，就會提示安裝Chrome插件。

到這裏，咱們基本上已經知道怎麼使用X-UA-Compatible標頭了，讓咱們更進一步！

其實，X-UA-Compatible不只能夠用meta元素放在頁面內，也能夠在服務器上進行配置，好比在IIS上配置默認的Header，或者在使用.NET中配置web.config文件，讓服務器端配置上默認的標頭，這樣系統就有默認的標頭來指定全局的文檔模式。由於單個頁面的文檔模式設置會覆蓋默認的文檔模式，所以，在某個須要特殊的文檔模式展現的頁面能夠在進行單獨配置meta元素便可。

在IIS7中的配置X-UA-Compatible標頭以下：

Apache下面配置X-UA-Compatible響應標頭的方法：點擊這裏下載MS官方文檔[PDF]

在web.config中的配置以下：

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

這裏的配置和前面配置meta元素不一樣，這裏配置的HTTP響應標頭是在客戶端請求服務端以後，在服務端的響應標頭中出現的（Response Header）。所以在頁面中是沒有meta元素的，咱們能夠在響應標頭裏面看到這個信息。

到這裏，咱們已經知道了如何在IIS上或者在.NET程序中配置全局性的X-UA-Compatible標頭了，咱們也瞭解了在頁面的meta元素中添加X-UA-Compatible，能夠說，咱們已經瞭解了X-UA-Compatible的全部用法，在實際中咱們徹底能夠根據本身的狀況，選擇一種或多種方式來知足咱們的項目需求。然而，事實上，咱們在使用的過程將會發現彷佛不是那麼的順利，咱們將會發現IE是否是會處於Quirks mode（怪癖模式）下，這是怎麼了？恩，問題千奇百怪，然總歸是咱們瞭解不精罷。但咱們深受其困的時候，咱們就可能還須要再進一步——瞭解IE究竟是如何處理這個標頭的！

對於IE的處理方法其實也並不難理解，一張圖就能清晰的描述出IE對於X-UA-Compatible的處理方式：

從這張圖片中咱們就可以很是清晰瞭解到IE處理X-UA-Compatible的方式，知道原理以後，咱們碰到關於X-UA-Compatible的問題處理起來也就知道如何進行了。剩下的時間，讓咱們休息一下吧，好好享受M$給咱們帶來的這片刻的寧靜。。。

via:Mitchell Chu's Blog

版權聲明：轉載時請以超連接形式標明文章原始出處和做者信息及本聲明
文章引用地址：http://www.iefans.net/dingyi-wendang-jianrongxing-zhiding-banben-jiexi/ 做者：iefans