IE瀏覽器兼容性模式

時間 2019-11-17

原文原文鏈接

最近支持公司的一個內部業務管理系統，系統是基於jQuery來實現；用了2年的MVVM框架的我轉向這個徹底使用jQuery框架來開發的系統，真是至關不爽（相信用過MVVM框架的跟我是相同的感覺）；更爲憋屈的是，到了這個年代，IE的親爹微軟都放棄支持IE6-10了，系統盡然還只支持使用IE瀏覽器（運營電腦安裝都是IE8瀏覽器，因此大部分只管IE8），其餘高級瀏覽器不被支持（固然這是因爲系統使用了基於IE的一些插件致使）。html

可是話又說回來，可是在支持系統的開發過程當中，常常看到X-UA-Compatible的meta配置值，甚是不解，這也暴漏了本身在有關瀏覽器兼容性視圖方面知識的缺陷。爲此經過查閱資料對IE文檔兼容性模式有了必定的理解，雖然這些東西會逐漸的退出歷史舞臺。git

一、瀏覽器兼容性簡介

　　歷史由來

在W3C標準推出以前的瀏覽器大戰時代，微軟的IE瀏覽器系列和網景瀏覽器之間各自爲政，他們的頁面是兩套徹底不一樣的實現方式，網頁要兼容必需要實現兩套代碼；對於開發者來講，這是比較痛苦的，也不利於標準化和普及。爲此W3C制定了一套標準規範，雖然初期這兩個公司未必執行這些標準，畢竟人家有大量的市場佔有率，一個小小的機構組織能奈我何；可是爲往後的標準化制定了一套規範。在W3C規範推出後，以前各自爲政開發的頁面在標準模式下就不能使用了；因爲存在大量規範以前開發的頁面還在服務中，爲此，爲了兼容以前老頁面的使用，這纔有了瀏覽器兼容性；github

　　三種模式

瀏覽器器兼容性最先出如今IE6瀏覽器，是爲了兼容以前頁面的展現。它有IE6標準模式和IE5.5的怪異模式兩種模式，其中詭異模式爲了兼容以前老頁面的。那麼瀏覽器通常有幾種模式呢？根據這篇文章《Activating Browser Modes with Doctype》介紹，準確的說是如下三種模式：web

標準模式(standards mode)：按照W3C制定的標準來執行對應的HTML、CSS和JS行爲。
準標準模式(almost standards mode)：大部分們是標準模式，只有一小部分表現爲怪異行爲。
怪異模式(quicks mode)：按照網景4和IE5.5的行爲來展示

　　瀏覽器雖有上述三種模式，可是須要注意的是咱們談及最多的是標準模式和詭異模式，根據Activating Browser Modes with Doctype的介紹，不一樣的doctype可能會致使不一樣的模式。還需補充一點：標準模式並不徹底標準。因瀏覽器廠商實現標準的階段不一樣，因此各個瀏覽器的標準模式之間也有很大的不一樣。chrome

瀏覽器區分標準和怪異模式，那麼如何區分當前文檔處於何種模式呢？瀏覽器

使用IE爲document提供的compatMode屬性來判斷，具體判斷以下表所示。後續其餘的標準瀏覽器也實現了該屬性用於檢測文檔處於何種模式；服務器

compatMode值	文檔模式
CSS1Compat	標準模式
BackCompat	怪異模式

　　後來從IE8開始又爲document提供了documentMode屬性；它不像compatMode那樣歸納性的得出非此即彼的結果，而是能夠具體檢測當前IE瀏覽器版本下網頁具體的文檔呈現模式。如IE8下有3種模式：5（怪異模式）、7（IE標準模式）、8（IE8標準模式）。可是其餘標準瀏覽器並無實現該屬性。框架

　　另外，若是文檔中沒有包含DOCTYPE或者沒法識別的DOCTYPE（除了下面講到的X-UA-Compatible配置，其配置值爲IE5-11會忽略DOCTYPE），那麼瀏覽器就會進入怪異模式。asp.net

二、瀏覽器模式與文檔模式

　　這兩個概念是與瀏覽器兼容性相關的，在兼容性視圖下或者在開發者工具欄下，你將看到瀏覽器兼容性和文檔模式。例以下圖是本機IE9瀏覽器的開發者工具下的瀏覽器模式和文檔模式工具

瀏覽器模式(Browser Mode): 用於切換IE針對當前文檔的默認文檔模式、對瀏覽器不一樣版本的條件註釋的解析、決定請求頭的userAgent的值。
文檔模式(document mode): 決定文檔的排版引擎和js引擎。

　　在開發者工具中切換不一樣瀏覽器模式，其對應的默認文檔模式爲當前瀏覽器模式的值；如IE7-9的瀏覽器模式對應的文檔模式分別爲IE7-9標準；

　　另外，注意IE8-9的兼容性模式對應的默認文檔模式是IE7標準。例以下面代碼在瀏覽器模式對應的兼容性模式下均爲IE7文檔模式：

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3   <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>test</title>
 6     </head>
 7     <body>
 8         <!--[if IE 6 ]>
 9             <span style="color:red">this is ie6</span><br /><br />
10         <![endif]--> 
11         <!--[if IE 7 ]>
12             <span style="color:red">this is ie7</span><br /><br />
13         <![endif]--> 
14         <!--[if IE 8 ]>
15             <span style="color:red">this is ie8</span><br /><br />
16         <![endif]--> 
17         <!--[if IE 9 ]>
18             <span style="color:red">this is ie9</span><br /><br />
19         <![endif]--> 
20     </body>
21 </html>

不一樣文檔模式，其documentMode值是不一樣的，根據上面一節講到的，經過documentMode能具體的獲取當前瀏覽器的文檔呈現模式；如IE9下的文檔模式有：

文檔模式	documentMode
怪異模式	5
IE7標準	7
IE8標準	8
IE9標準	9

　能夠看到，IE8+後的瀏覽器版本的兼容性模式中，不會有IE6的文檔模式。

三、IE瀏覽器的文檔兼容模式

　　上面介紹了IE瀏覽器模式的切換會改變網頁的默認文檔模式，可是是否能夠指定網頁的文檔模式呢，這是固然能夠的，這篇文章《定義文檔兼容性，讓IE按指定的版本解析咱們的頁面》講解的很透徹；具體地是須要用到IE8纔開始支持的X-UA-Compatible的meta配置；爲該X-UA-Compatible配置不一樣的值，網頁就會按照指定的文檔模式來渲染模式以及對應的JS引擎來執行，也就是說開啓了IE瀏覽器的兼容模式。例如爲網頁指定以IE8的標準模式來呈現的配置以下：

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

除了上述的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，遵循 <!DOCTYPE> 指令，參照IE=EmulateIE7說明
IE=10	標準IE10

　　須要注意的是，若設置的值爲表格其餘值，那麼IE的解釋是會嘗試將數值轉化爲最接近的瀏覽器版本。

<meta http-equiv="X-UA-Compatible" content="IE=7.5" > <!-- IE7 mode -->

　　在客戶端能夠經過設置meta的X-UA-Compatible值的來變動瀏覽器的文檔模式，服務器端一樣能夠變動瀏覽器的文檔模式。服務能夠在響應頭response header中設置X-UA-Comptible的值爲響應的值來變動當前網頁的文檔模式。

　　服務器以這種方式，一樣能夠指定網頁的文檔模式；我的感受這個種方式相對來講比較靈活，能夠根據不一樣的瀏覽器來設置對應的文檔模式。

　　另外，IE開發者工具和IE瀏覽器的兼容性視圖的列表配置等等都可以改變瀏覽器的文檔模式。

四、決定IE瀏覽器文檔模式的優先級

　　話說回來，既然有上一節提到的4種方式能夠變動瀏覽器的文檔模式，那麼他們的優先級孰高孰低呢？這個能夠參考上面提到的文章《關於瀏覽器模式和文本模式的困惑》裏面的兩幅圖來講明。

IE9下的文檔模式的優先級的決定順序以下圖：

IE8的文檔模式優先級以下圖：

　　從上面IE八、9的文檔模式圖中能夠看出：

IE八、9瀏覽器的兼容性模式默認均是使用IE7仿真模式做爲文檔模式的；
兼容性視圖配置的信息一樣默認是IE7仿真模式做爲文檔模式的。

因此在兼容老頁面時，IE7仿真視圖是首選的兼容性方式。

參考：

一、深刻理解瀏覽器兼容性模式

二、關於瀏覽模式和文本模式的困惑

三、定義文檔兼容性

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

五、Activating Browser Modes with Doctype

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。