IE (第一部分) 浏览器 中 关于浏览器模式和文本模式的困惑

什么是浏览器模式和文本模式?

经常使用IE开发者工具的同学,肯定见过浏览器模式和文本模式,对于这两个名词,综合相关文档解释如下:

浏览器模式(Browser Mode),用于切换IE针对该网页的默认文本模式、对不同版本浏览器的条件注释解析、决定请求头里userAgent的值。它在浏览器发出请求之前就已经确定,网站没有办法修改这个值。它代表的是用户以何种浏览器访问网站。IE9支持下列浏览器模式:

IE9兼容性模式与IE7模式的区别是:前者在UA里加上了Trident版本,后者和IE7完全一致无Trident标识;IE8中,IE9兼容性模式对应为IE8兼容性模式,UA里Trident版本为4.0,其他没变化。另,IE8中没有IE9模式

文本模式(Document Mode),其实就是经常说的文档模式。不同的文本模式对应不同的排版引擎,不同的JS引擎。上面提到,每一种浏览器模式对应一种默认的文本模式,网站还可以通过一些手段来更改文本模式,它代表的是浏览器以何种模式呈现页面。IE9有下列文本模式:

(需要说明的是,IE8开始支持的渲染机制有:怪异模式(quirks mode)、完全标准模式(standards mode)和近似标准模式(almost standards mode),但开发者工具是无法选择近似标准模式的,实际上我们一般都选择触发完全标准模式)

浏览器模式和文本模式有什么用?

用来解决IE各版本带来的兼容性问题。根据微软描述的IE兼容性策略,在IE8+访问一个页面要经过这样的流程:

一、首先,浏览器要确定浏览器模式。上面说过,浏览器模式是在请求发送之前就必须确定,默认取最新(IE9为IE9标准,IE8为IE8标准),有两种方式可以更改它:

  • 通过开发者工具选择(可选项见上表);
  • 通过点击兼容性视图按钮;
  • 命中兼容性视图列表(微软维护的需要采用兼容性视图的列表。IE8+默认对这个列表和局域网的网址都会采用相应的兼容性模式);

二、浏览器通过请求头里userAgent的值,告诉服务器当前是何种浏览器模式;

三、服务器可以通过下面方式改变浏览器文本模式:

  • doctype;
  • X-UA-Compatible Meta或对应的响应头;

四、浏览器综合考虑开发者工具设置、第三步服务器返回的设置、兼容性列表设置等等情况,决定页面使用何种文本模式。这个过程有点复杂,放一张Qwrap群里灰大提供的流程图,可以自己点开看大图。

(上图是IE9选取文本模式的流程图,这里还有IE8版本,有一些区别)

问题终于来了!

回顾下前面的介绍,浏览器模式决定:1)发送给服务端的UA;2)默认的文本模式;3)如何解析条件注释。它在请求发送前就已经确定,且不受服务端控制。文本模式决定:1)排版引擎;2)JS引擎。它在浏览器得到响应后最终确定,服务端可通过doctype或X-UA-Compatible来控制。

测试一、根据前文,如果用户浏览器没有激活兼容性视图;没有开启IE开发者工具。那么IE9的浏览器模式默认为IE9,默认对应的文本模式应该是IE9标准(对于IE8来说,是类似的),我们通过下列代码将它改到IE7标准

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

  下面,我们分别用原生IE8、IE9测试这个页面

上表说明,浏览器发送请求时的浏览器模式符合预期(根据请求头UA),X-UA-Compatible确实会将浏览器文本模式改到了IE7标准(根据documentMode和JS引擎)。奇怪的是,文本模式的改变导致了浏览器模式的改变,因为条件注释是由浏览器模式决定的。本例中,文本模式改到IE7标准,条件注释也跟着变成IE7,意味着浏览器模式变到IE9/IE8兼容性(从IE9的测试来看,不能是IE7,因为UA里包含Trident)。至于IE8中JS取到的UA为什么没有变化,可能是bug或者理解不一致。

测试二、那如果把测试地址加到兼容性列表呢?根据前文,这种情况浏览器模式应该是IE9/IE8兼容性,对应的文本模式依然是IE7标准。测试结果如下:

上表是完全符合预期的。

测试三、如果把X-UA-Compatible改成IE=edge,继续使用兼容性模式测试呢?结论如下:

这个结论其实跟测试一是一致的:X-UA-Compatible为IE=edge,意味着文本模式会使用最新可用的版本,然而文本模式的更改,又把浏览器模式从IE9/IE8兼容性变成IE9/IE8。IE9会按照新的浏览器模式来设置JS的navigator.userAgent,IE8下JS的UA不变。

测试四、那如果通过开发者工具人为设置浏览器模式和文本模式呢?经过测试,这样测试都是符合预期的。例如IE9下,设置浏览器模式为IE8,文本模式为IE7标准,请求头UA、JS的UA、条件注释都表明浏览器模式是IE8,documentMode和JS引擎都表明文本模式是IE7标准。因为,IE开发者工具的优先级最高,设置了这个,其他条件统统无视!

结论

IE8/9中X-UA-Compatible对文本模式的改变会导致浏览器模式的改变,也就是说服务端可以间接控制浏览器模式。这与微软文档里这一段描述有出入:

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,如果网站通过X-UA-Compatible meta/header更改文本模式为当前浏览器模式默认文本模式之外的值,那么页面将按照新的文本模式来呈现,条件注释也按照新的文本模式对应的浏览器模式来解析,但是JS获取的UA是浏览器模式初始状态。这样会导致用JS获取UA得到的浏览器版本,与实际渲染的浏览器版本不符,这会对基于UA的浏览器检测造成干扰。

对于IE9,只有一点与IE8不同:JS获取到的是新文本模式对应的浏览器模式的UA。这会导致用JS获取UA得到的浏览器版本,与请求头发送给服务器UA里标识的浏览器版本不符,这可能对统计有影响。

对于IE这种兼容性方案,几乎不可能做到理论上的完美。个人感觉还是IE9的策略影响面较小,更好一些。

PS,上述结论都是我用Windows XP的原生IE8,Windows 7的原生IE9亲自测试得出来的。对于国内那些IE Shell们,实在过于奇葩,不在本文范围内。

来源:https://www.imququ.com/post/browser-mode-and-document-mode-in-ie.html

时间: 01-21

IE (第一部分) 浏览器 中 关于浏览器模式和文本模式的困惑的相关文章

IE (第二部分) 浏览器 中 关于浏览器模式和文本模式

判断真正的 IE 版本 很多 JS 框架都通过 UA 判断 IE 的版本.对于 IE6,这种做法没问题( IE6 没有浏览器模式的概念,也没有其它 IE 可以把浏览器模式改为 IE6:IE7 虽然也没有浏览器模式,但 IE8+ 可以把浏览器模式设置为 IE7 模式).但是从 IE8 开始引入的浏览器模式会产生不同的 UA.例如,IE9 有这些: 如果仅通过 UA 中的「MSIE X.0」来判断,会得到 IE7~9 三种不同结果. 实际上,对于 IE8+,根据 UA 字符串只能确定当前是否是兼容性

IE的浏览器模式、文本模式

最近在部署网页的时候,发现IE下的布局完成混乱. 在改变IE的文本模式后,显示就正常了. IE的浏览器模式,用于切换IE针对该网页的默认文本模式.对不同版本浏览器的条件注释解析.决定请求头里userAgent的值.它在浏览器发出请求之前就已经确定,网站没有办法修改这个值.它代表的是用户以何种浏览器访问网站. 主要的是文本模式,文本模式决定浏览器的排版引擎和JS引擎,它代表的是浏览器以何种模式呈现页面. 为了解决布局混乱的问题,我们需要手动决定文本模式,通常我们采用以下的语句: <meta htt

Linux的图形模式和文本模式以及单用户模式切换

1.默认开机进入文本模式 如果想让开机自动进纯文本模式, 修改/etc/inittab 找到其中的 id:5:initdefault: 这行指示启动时的运行级是5,也就是图形模式 改成3就是文本模式了 id:3:initdefault: 这是因为Linux操作系统有六种不同的运行级(run level),在不同的运行级下,系统有着不同的状态,这六种运行级分别为: 0:停机(记住不要把initdefault 设置为0,因为这样会使Linux无法启动) 1:单用户模式,就像Win9X下的安全模式.

浏览器中的user-agent的几种模式

服务器一般会根据访问的浏览器进行识别,针对不同浏览器才用不同的网站样式及结构,也是通过这个信息判断用户使用的平台模式(手机,pc或平板) 识别为手机一般有这几个关键字: "Windows Phone","iPod","iPad","Android","ios","iPhone" 具体常用的几类user-agent信息为: 1 火狐浏览器: Mozilla/5.0 (Windows NT

获取浏览器中选中部分,比如文本等

代码如下: 效果如图 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-e

第12课 - 实模式到保护模式(下)

不一般的jmp(s16->s32) 在16位代码中,所有的立即数默认为16位 从16位代码段跳转到32位代码段时,必须做强制转换 深入保护模式:定义显存段 为了显示数据,必须存在两大硬件:显卡 + 显示器 显卡 为显示器提供需要显示的数据 控制显示器的模式和状态 显示器 将目标数据以可见的方式呈现在屏幕上 显存的概念和意义 显卡拥有自己内部的数据存储器,简称显存 显卡的工作模式:文本模式&图形模式 在不同的模式下,显卡对显存内容的解释是不同的 可以使用专属指令或int 0x10中断改变显卡工

超详细Centos6.5文本模式安装步骤

对于刚接触Linux的用户来说,安装系统和配置网卡的过程也可能要用很长的时间,Centos6.5的安装方式有二种,图形模式和文本模式.文本模式从6开始就不支持自定义分区了(新手练习时默认分区足够用),如果需要自定义分区要使用图形模式安装.大家在学习Linux时,不需要一开始就在物理机上安装,下面就使用VMware Workstation虚拟机软件演示一下文本模式安装. 演示环境所需要的软件: 虚拟机版本:VMware Workstation12 Linux版本:CentOS-6.5-x86_64

Kiosk模式:IE浏览器中的IE全屏模式

相信很多网友都知道IE浏览器有个全屏模式,在IE窗口中单击键盘的F11键即可进入全屏模式.但是很少有用户知道IE浏览器还有一个Kiosk模式. 那么什么是"Kiosk"模式? 在IE6浏览器中微软就已经引入了Kiosk模式,通俗的说就是完完全全的全屏,该模式不同于F11全屏,无地址栏,无windows状态栏等,只显示网页内容和滚动条. 因为Kiosk模式下只能使用快捷键进行操作,所以普通用户平时很少会使用该模式.不过随着平板触摸设备的流行,全屏浏览也将会变得越来越多,Windows 8

浏览器中实现3D全景浏览

如果你用过网页版的百度地图,你大概3D全景图浏览是一种怎样的酷炫体验:在一个点可以360度环顾周围的建筑.景色,当然也可以四周移动,就像身临其境. 科普 全景图共分为三种: ①球面全景图 利用一张全景图围成一个球,自身位置位于球体内.由于图片是矩形,所以最上和最下的缝合处很明显就能够看得出来. 球面全景图是最接近人眼的构建模式,若利用多个立面构建,拼接方法繁琐,性能消耗高. 因此,本文介绍的是上述通过一张全景图构成的球面全景图. ②立方体全景图 一个立方体,有六个面组成,所以就需要六张图片啦.自