什么是瀏覽器模式和文本模式？

經(jīng)常使用IE開發(fā)者工具的同學(xué)，肯定見過瀏覽器模式和文本模式，對于這兩個(gè)名詞，綜合相關(guān)文檔解釋如下：

瀏覽器模式（Browser Mode），用于切換IE針對該網(wǎng)頁的默認(rèn)文本模式、對不同版本瀏覽器的條件注釋解析、決定請求頭里userAgent的值。它在瀏覽器發(fā)出請求之前就已經(jīng)確定，網(wǎng)站沒有辦法修改這個(gè)值。它代表的是用戶以何種瀏覽器訪問網(wǎng)站。IE9支持下列瀏覽器模式：

?userAgent默認(rèn)文本模式

IE7	MSIE 7.0	IE7標(biāo)準(zhǔn)
IE8	MSIE 8.0 && Trident/4.0	IE8標(biāo)準(zhǔn)
IE9	MSIE 9.0 && Trident/5.0	IE9標(biāo)準(zhǔn)
IE9兼容性	MSIE 7.0 && Trident/5.0	IE7標(biāo)準(zhǔn)

（IE9兼容性模式與IE7模式的區(qū)別是：前者在UA里加上了Trident版本，后者和IE7完全一致無Trident標(biāo)識；IE8中，IE9兼容性模式對應(yīng)為IE8兼容性模式，UA里Trident版本為4.0，其他沒變化。另，IE8中沒有IE9模式）

文本模式（Document Mode），其實(shí)就是經(jīng)常說的文檔模式。不同的文本模式對應(yīng)不同的排版引擎，不同的JS引擎。上面提到，每一種瀏覽器模式對應(yīng)一種默認(rèn)的文本模式，網(wǎng)站還可以通過一些手段來更改文本模式，它代表的是瀏覽器以何種模式呈現(xiàn)頁面。IE9有下列文本模式：

?documentMode

IE7標(biāo)準(zhǔn)	7
IE8標(biāo)準(zhǔn)	8
IE9標(biāo)準(zhǔn)	9
怪異（Quirks）	5

（需要說明的是，IE8開始支持的渲染機(jī)制有：怪異模式（quirks mode）、完全標(biāo)準(zhǔn)模式（standards mode）和近似標(biāo)準(zhǔn)模式（almost standards mode），但開發(fā)者工具是無法選擇近似標(biāo)準(zhǔn)模式的，實(shí)際上我們一般都選擇觸發(fā)完全標(biāo)準(zhǔn)模式）

瀏覽器模式和文本模式有什么用？

用來解決IE各版本帶來的兼容性問題。根據(jù)微軟描述的IE兼容性策略，在IE8+訪問一個(gè)頁面要經(jīng)過這樣的流程：

一、首先，瀏覽器要確定瀏覽器模式。上面說過，瀏覽器模式是在請求發(fā)送之前就必須確定，默認(rèn)取最新（IE9為IE9標(biāo)準(zhǔn)，IE8為IE8標(biāo)準(zhǔn)），有兩種方式可以更改它：

• 通過開發(fā)者工具選擇（可選項(xiàng)見上表）；
• 通過點(diǎn)擊兼容性視圖按鈕；
• 命中兼容性視圖列表（微軟維護(hù)的需要采用兼容性視圖的列表。IE8+默認(rèn)對這個(gè)列表和局域網(wǎng)的網(wǎng)址都會(huì)采用相應(yīng)的兼容性模式）；

二、瀏覽器通過請求頭里userAgent的值，告訴服務(wù)器當(dāng)前是何種瀏覽器模式；

三、服務(wù)器可以通過下面方式改變?yōu)g覽器文本模式：

• doctype；
• X-UA-Compatible Meta或?qū)?yīng)的響應(yīng)頭；

四、瀏覽器綜合考慮開發(fā)者工具設(shè)置、第三步服務(wù)器返回的設(shè)置、兼容性列表設(shè)置等等情況，決定頁面使用何種文本模式。這個(gè)過程有點(diǎn)復(fù)雜，放一張Qwrap群里灰大提供的流程圖，可以自己點(diǎn)開看大圖。

（上圖是IE9選取文本模式的流程圖，這里還有IE8版本，有一些區(qū)別）

問題終于來了！

回顧下前面的介紹，瀏覽器模式?jīng)Q定：1）發(fā)送給服務(wù)端的UA；2）默認(rèn)的文本模式；3）如何解析條件注釋。它在請求發(fā)送前就已經(jīng)確定，且不受服務(wù)端控制。文本模式?jīng)Q定：1）排版引擎；2）JS引擎。它在瀏覽器得到響應(yīng)后最終確定，服務(wù)端可通過doctype或X-UA-Compatible來控制。

測試一、根據(jù)前文，如果用戶瀏覽器沒有激活兼容性視圖；沒有開啟IE開發(fā)者工具。那么IE9的瀏覽器模式默認(rèn)為IE9，默認(rèn)對應(yīng)的文本模式應(yīng)該是IE9標(biāo)準(zhǔn)（對于IE8來說，是類似的），我們通過下列代碼將它改到IE7標(biāo)準(zhǔn)：

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

下面，我們分別用原生IE8、IE9測試這個(gè)頁面：

?請求頭UAnavigator.userAgent條件注釋documentModeJS引擎

IE8	MSIE 8.0 && Trident/4.0	MSIE 8.0 && Trident/4.0	IE7	7	IE7
IE9	MSIE 9.0 && Trident/5.0	MSIE 7.0 && Trident/5.0	IE7	7	IE7

上表說明，瀏覽器發(fā)送請求時(shí)的瀏覽器模式符合預(yù)期（根據(jù)請求頭UA），X-UA-Compatible確實(shí)會(huì)將瀏覽器文本模式改到了IE7標(biāo)準(zhǔn)（根據(jù)documentMode和JS引擎）。奇怪的是，文本模式的改變導(dǎo)致了瀏覽器模式的改變，因?yàn)闂l件注釋是由瀏覽器模式?jīng)Q定的。本例中，文本模式改到IE7標(biāo)準(zhǔn)，條件注釋也跟著變成IE7，意味著瀏覽器模式變到IE9/IE8兼容性（從IE9的測試來看，不能是IE7，因?yàn)閁A里包含Trident）。至于IE8中JS取到的UA為什么沒有變化，可能是bug或者理解不一致。

測試二、那如果把測試地址加到兼容性列表呢？根據(jù)前文，這種情況瀏覽器模式應(yīng)該是IE9/IE8兼容性，對應(yīng)的文本模式依然是IE7標(biāo)準(zhǔn)。測試結(jié)果如下：

?請求頭UAnavigator.userAgent條件注釋documentModeJS引擎

IE8	MSIE 7.0 && Trident/4.0	MSIE 7.0 && Trident/4.0	IE7	7	IE7
IE9	MSIE 7.0 && Trident/5.0	MSIE 7.0 && Trident/5.0	IE7	7	IE7

上表是完全符合預(yù)期的。

測試三、如果把X-UA-Compatible改成IE=edge，繼續(xù)使用兼容性模式測試呢？結(jié)論如下：

?請求頭UAnavigator.userAgent條件注釋documentModeJS引擎

IE8	MSIE 7.0 && Trident/4.0	MSIE 7.0 && Trident/4.0	IE8	8	IE8
IE9	MSIE 7.0 && Trident/5.0	MSIE 9.0 && Trident/5.0	IE9	9	IE9

這個(gè)結(jié)論其實(shí)跟測試一是一致的：X-UA-Compatible為IE=edge，意味著文本模式會(huì)使用最新可用的版本，然而文本模式的更改，又把瀏覽器模式從IE9/IE8兼容性變成IE9/IE8。IE9會(huì)按照新的瀏覽器模式來設(shè)置JS的navigator.userAgent，IE8下JS的UA不變。

測試四、那如果通過開發(fā)者工具人為設(shè)置瀏覽器模式和文本模式呢？經(jīng)過測試，這樣測試都是符合預(yù)期的。例如IE9下，設(shè)置瀏覽器模式為IE8，文本模式為IE7標(biāo)準(zhǔn)，請求頭UA、JS的UA、條件注釋都表明瀏覽器模式是IE8，documentMode和JS引擎都表明文本模式是IE7標(biāo)準(zhǔn)。因?yàn)?#xff0c;IE開發(fā)者工具的優(yōu)先級最高，設(shè)置了這個(gè)，其他條件統(tǒng)統(tǒng)無視！

結(jié)論

IE8/9中X-UA-Compatible對文本模式的改變會(huì)導(dǎo)致瀏覽器模式的改變，也就是說服務(wù)端可以間接控制瀏覽器模式。這與微軟文檔里這一段描述有出入：

An important detail to remember is that?Browser Mode is chosen before IE requests web content. This means that?sites cannot choose a Browser Mode.

對于IE8，如果網(wǎng)站通過X-UA-Compatible meta/header更改文本模式為當(dāng)前瀏覽器模式默認(rèn)文本模式之外的值，那么頁面將按照新的文本模式來呈現(xiàn)，條件注釋也按照新的文本模式對應(yīng)的瀏覽器模式來解析，但是JS獲取的UA是瀏覽器模式初始狀態(tài)。這樣會(huì)導(dǎo)致用JS獲取UA得到的瀏覽器版本，與實(shí)際渲染的瀏覽器版本不符，這會(huì)對基于UA的瀏覽器檢測造成干擾。

對于IE9，只有一點(diǎn)與IE8不同：JS獲取到的是新文本模式對應(yīng)的瀏覽器模式的UA。這會(huì)導(dǎo)致用JS獲取UA得到的瀏覽器版本，與請求頭發(fā)送給服務(wù)器UA里標(biāo)識的瀏覽器版本不符，這可能對統(tǒng)計(jì)有影響。

對于IE這種兼容性方案，幾乎不可能做到理論上的完美。個(gè)人感覺還是IE9的策略影響面較小，更好一些。

PS，上述結(jié)論都是我用Windows XP的原生IE8，Windows 7的原生IE9親自測試得出來的。對于國內(nèi)那些IE Shell們，實(shí)在過于奇葩，不在本文范圍內(nèi)。

參考：

Testing sites with Browser Mode vs. Doc Mode

X-UA-Compatible header/meta tag is NOT the same as the Internet Explorer 8+ Compatibility View button

?

原文鏈接：http://www.imququ.com/post/browser-mode-and-document-mode-in-ie.html

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/hustskyking/archive/2013/06/08/browser-mode-and-doccument-mode.html

總結(jié)

以上是生活随笔為你收集整理的关于浏览器模式和文本模式的困惑的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。