JS魔法堂：瀏覽器模式和文檔模式怎麼玩？

時間 2020-08-11

原文原文鏈接

1、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　javascript

從IE8開始引入了文檔兼容模式的概念，做爲開發人員的咱們能夠在開發人員工具中經過「瀏覽器模式」和「文檔模式」（IE11開始改成「瀏覽器模式」改爲更貼切的「用戶代理字符串」）品味一番，它的出現極大地方便了苦逼的前端攻城獅們適配各版本的IE，但jser們也不能徹底信任它，由於它只是提供儘量的文檔模式模擬而已。css

本篇大部份內容來源於官方解說：http://msdn.microsoft.com/library/cc288325(v=vs.85).aspx，並儘可能融入我的日常工做中踩過的坑加以闡述。html

注意：本文內容僅針對HTTP頭Content-Type字段爲text/html的html文檔做說明，而XML文檔不在本文的討論範圍以內。前端

2、什麼是瀏覽器模式？　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　java

初看「瀏覽器模式」確實不明白啥意思，也許IE的工程師們也瞭解這詞的蹩腳，因而IE11索性就更名爲「用戶代理字符串」。如今大夥應該清楚這貨就是用來設置navigator.userAgent和navigator.appVersion的。web

它惟一須要注意的是，在不一樣的IE版本中，它與文檔模式的關係可不相同。瀏覽器

IE89中，假若瀏覽器模式被設置爲Internet Explorer7，那麼文檔模式的只能設置爲7,6,5；服務器

IE11中，用戶代理字符串設置和文檔模式可謂是沒有半毛錢關係。app

3、什麼是文檔模式？　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　框架

對於以Webkit、Molliza等做爲內核的瀏覽器來講，DOM樹的解析、渲染，JS的API等主要與內核版本掛鉤；而對於IE瀏覽器而言，這些從IE6開始就跟文檔模式掛鉤了。爲了更好的理解文檔模式，咱們以時間爲線從IE5.5開始學習吧！

3.1. 從「久遠」的IE5.5提及

　　如今雖然沒什麼用使用IE5.5了，但它卻從未離開過咱們，由於IE5.5一直以怪異模式（Quirks，IE5的文檔模式）的形式存活在咱們的身邊。不過在那個只有IE5.5的年代，並無Quirks這一說法，只是後來IE6面世後逐漸向W3C標準靠攏，而IE5.5下DOM樹的解析、渲染等都與W3C標準有很大差異，因而命其名爲Quirks。

3.2. 兼容模式——IE6的新發明

　　因爲IE6和IE5.5下DOM樹的解析等都有很大差別，致使那些適配IE5.5的老網站沒法在IE6上正常顯示，因而出現了一個新功能——「兼容模式」，用於解決老網站的顯示問題。IE6的兼容模式就兩種，怪異模式（Quirks）和IE6標準模式。（IE7也只有怪異模式和IE7標準模式）

　IE6默認使用怪異模式（Quirks），僅當以<!DOCTYPE>做爲文檔第一行聲明文檔類型時，才採用IE6的標準模式，即便IE沒法識別所聲明的文檔類型。（IE7也是這樣）

　注意：這時的兼容模式主要是解決顯示問題，要知道那時的JS只是小配角而已。

3.3. 文檔兼容性模式——IE8的新寵

　　「文檔兼容性模式」是對「兼容模式」的擴展，就IE8而言，除了提供怪異模式（Quirks）和IE8標準模式外，還提供了IE7標準模式、模擬IE7模式，並且設置的方式也豐富得多。

4、文檔模式的種類　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　1. 怪異模式

　　　　IE6789的是IE5.5的文檔模式，IE10+和Chrome等瀏覽器是W3C規範的怪異模式。

　　2. 標準模式（非怪異模式）

　　　　W3C標準的文檔模式，但各瀏覽器的實現階段不盡相同。

　　3. 準標準模式（有限怪異模式）

　　　　因爲該模式離W3C標準仍然有一段距離，所以被稱做準標準模式（或有限怪異模式）。IE六、7的標準模式實際上就是準標準模式，而IE8+纔有實質上的標準模式。但到底二者的不一樣點體驗在哪裏，本人暫時不瞭解，請各位指導！

5、IE8+設置文檔模式的方式　　　　　　　　　　　　　　　　　　　　　　　　　　

開發者經常使用的方式：

　　1. 開發者工具中的「文檔模式」；

　　2. 經過在head標籤內加入如<meta http-equiv="X-UA-Compatible" content="IE=7">的元數據標籤（該例子將文檔模式設置爲IE7標準模式）；

　　3. 經過<!DOCTYPE>的增刪，在標準模式和怪異模式（Quirks）間切換；

　　4. 經過Web服務器配置(讓http response header 帶上 X-UA-Compatible: IE=edge)

IIS的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>

用戶經常使用的方式：

　　1. 點擊地址欄的兼容性視圖切換按鈕（僅當HTTP、HTTPS協議時纔出現該按鈕）；

　　2. 若網頁是在Intranet區域中加載，配置使用兼容性視圖顯示Intranet區域中的網頁；

　　3. 配置瀏覽器使用兼容視圖瀏覽全部網頁；

　　4. 將網站加入到兼容性視圖名單中；

　　5. 內網管理員將該網站加入到兼容性視圖瀏覽名單中；

微軟的方式：

　　1. IE會按期向微軟官網拉數據，假如某網站被列入微軟的兼容性視圖瀏覽名單中，那麼就會IE就會以兼容性視圖模式來處理該網站。

所以咱們能夠明白到文檔模式不是徹底掌控在咱們手中的，哎。。。。。。

2017/03/29，因爲<meta http-equiv="X-UA-Compatible" content="IE=edge">不必定很生效，由於當端口不是80時，IE默認設置是將其視爲內網應用(intranet site)，並採用兼容模式來顯示(display intranet site in compatibility view)。所以最好採用HTTP Response Header的方式。

6、<meta http-equiv="X-UA-Compatible">與<!DOCTYPE>結伴影響文檔模式

全部IE瀏覽器在默認狀況下（<meta http-equiv="X-UA-Compatible">與<!DOCTYPE>均沒有），是採用怪異模式（Quirks）；當有<!DOCTYPE>時，均採用瀏覽器版本對應的標準模式（如IE8就採用IE8標準模式，IE11就採用IE11標準模式）。

如今要注意的是，當出現<meta http-equiv="X-UA-Compatible">時，文檔模式將會如何呢？咱們首先了解一下IE11下它的content屬性值範圍吧，具體範圍以下：

IE=5、IE=7、IE=EmulateIE七、IE=8、IE=EmulateIE八、IE=9、IE=十、 IE=十一、 IE=Edge

1. IE=5：表示採用怪異模式；

2. IE=7等純數字的值：表示採用對應IE版本的標準模式，即便不是以<!DOCTYPE>做爲文檔第一行，文檔模式依舊使用標準模式；

3. IE=EmulateIE7等含EmulateIE字符串的值：表示採用模擬對應IE版本的模式，就是以<!DOCTYPE>做爲文檔第一行則採用標準模式，不然採用怪異模式。

4. IE=Edge：表示採用瀏覽器自身版本的文檔模式，如IE11，以<!DOCTYPE html>做爲文檔第一行則採用IE11標準模式，不然採用怪異模式。

注意：

1. 在IE11中，IE=10和IE=EmulateIE10是同樣的，IE=十一、IE=EmulateIE11和IE=Edge是同樣的；

2017/03/29，因爲document compatibility mode僅在IE8/9/10生效，所以在IE11時設置<meta http-equiv="X-UA-Compatible">是無效的，只有在開發工具中設置纔有效果。

若要在IE11下采用舊版本的文檔模式，則要採用Enterprise Mode(https://blogs.msdn.microsoft.com/ie/2014/04/02/stay-up-to-date-with-enterprise-mode-for-internet-explorer-11/)

2. 10及以上的文檔模式，若文檔第一行不是有效的<!DOCTYPE>（怎樣纔是有效的<!DOCTYPE>，請期待《JS魔法堂：doctype咱們應該瞭解的基礎知識》），則document.compatMode返回BackCompat，但document.documentMode卻返回正確的文檔模式；

3. 9及如下的文檔模式，只要文檔第一行出現<!DOCTYPE>，無論是否有效，document.compatMode均返回CSS1Compat。當文檔第一行沒有<!DOCTYPE>且沒有指定標準模式時，document.compatMode才返回BackCompat，且document.documentMode一定返回5。

7、對<meta http-equiv="X-UA-Compatible">瞭解多一點　　　　　　　　　　　　

　　6.1. 有效位置

　　　　必須放在head標籤內纔有效。

　　6.2. 多個標籤時只認第一個

<html>
    <head>
      <meta http-equiv="X-UA-Compatible" content="IE=7">
      <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
    </head>
    <body></body>
    <script type="text/javascript">
        console.log(document.documentMode); // 輸出 7
    </script>
</html>

　　6.3. 無效content值，就設置爲最接近的文檔模式

　　　　IE=a：文檔模式爲5

　　 IE=7.5：文檔模式7

　　6.4. 一個標籤設置多個文檔模式，瀏覽器會自動選擇可用的最高的文檔模式

<html>
    <head>
      <meta http-equiv="X-UA-Compatible" content="IE=7;IE=9;IE=8">
    </head>
    <body></body>
    <script type="text/javascript">
        console.log(document.documentMode); // IE11中，輸出 9
    </script>
</html>

8、不同的標準模式　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　雖說IE六、七、八、九、十、11均有標準模式，但因爲W3C標準規範內容隨時間的增改，並且瀏覽器對標準的實現是階段性的，所以個版本的標準模式不盡相同。

9、不同的怪異模式　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　IE6789的怪異模式其實就是IE5.5的文檔模式，但從IE10開始它的遵照了W3C規範的怪異模式。因此你們不要被名字而矇騙咯！

舉個栗子：

<html>
  <head>
     <style type="text/css">
       #target{
           width: 100px;
           height: 20px;
           border: solid 1px red;
           margin: 0 auto; } </style> </head> <body> <div id="target"><div> </body> </html>

上面的代碼在是運行在怪異模式下，在IE6789下若要div#target自動水平居中，必須加上<!DOCTYPE html>轉成用標準模式渲染才行。但在IE10+、Webkit和Molliza中即便在怪異模式下div#target也會自動水平居中。

10、文檔模式影響到哪些方面　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

1. 佈局

　　表格、單元格的樣式等都受到文檔模式的影響，尤爲是盒子模型。

2. 解析

　　css和html的解析也會受到文檔模式的影響，就像在IE678標準模式時，HTML解析時會將嵌套form下的子節點挪到上一節；而IE9標準模式時不會。

3. 腳本

　　這個我想不用多說你們也深有體驗了。

11、Jser別太開心　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

初次發現IE8+提供文檔兼容性模式時真的欣喜若狂，終於不用找機器來IE678逐個測試了，終於不用那個常常掛死的IETester了。但後來才發現文檔兼容性模式僅僅是方便咱們開發調試而已，並不能徹底替代IETester，更不能替代在真實的IE67上測試。由於除了瀏覽器版本對應的文檔模式外，其餘文檔模式均是跑在瀏覽器內核虛擬機上，而這些虛擬機僅僅能模擬真實瀏覽器內核的大部分DOM樹解析、渲染和JS API而已。例如在IE8上設定文檔模式爲怪異模式，但XMLHttpRequest依舊可用（XMLHttpRequest是從IE7開始纔有的），所以在檢測瀏覽器特性的時候，特徵嗅探比判斷瀏覽器的文檔模式更爲準確、好用。

另外，從第六大點的注意事項中咱們能夠看到，從IE10開始IE要脫離IE56789的風格，真正靠近W3C標準。

1. 沒有有效的doctype時盒子模型的渲染模式就是怪異模式，不然就使用標準模式；

2. 盒子模型的渲染模式和文檔模式分離，也就是渲染模式爲怪異模式時，文檔模式不是5。這樣Jser仍是使用IE10+的JS API，不用忍受IE5之苦；

3. 雖然在document.compatMode爲BackCompat時，渲染模式都叫怪異模式，但IE56789的怪異模式和IE10+的怪異模式所顯示的效果和經過JS獲取的樣式數據都不一樣，IE10+的與Webkit、Molliza的效果相近。

12、總結　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

從「瀏覽器模式」與「文檔模式」關聯，「文檔模式」與「盒子模型的渲染模式」掛鉤，到IE10+一會兒將三者關聯切斷，轉向W3C標準。一直以爲IE9是IE非標準與標準間的過渡帶，如今就更加認定是這樣了。

也許你們看到這裏會更加疑惑，彷佛瞭解上述內容會加劇開發的負擔（考慮的點更多了）。

其實咱們只要再次明確一下「文檔兼容性模式」的目的就行了，對終端用戶來說它是爲了在新版IE中儘可能正確地顯示老網站；對開發者來說它是爲了方便調試新網站在舊版IE上的顯示效果和JS的有效性，極端狀況下會經過鎖定文檔模式來啓用舊技術（如ie67下的vml）。

因此做爲普通開發者的咱們只需作三件事：

1. 以有效的doctype做爲文檔的第一行，保證渲染模式爲標準模式；

2. 開發前設定網站的最佳運行環境範圍，就是需適配的IE版本號，是否適配Webkit等；

3. 開發並使用各類hacks爲兼容性付出不懈的努力。