关于浏览器模式和文本模式的困惑

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

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

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

 userAgent默认文本模式
IE7MSIE 7.0IE7标准
IE8MSIE 8.0 && Trident/4.0IE8标准
IE9MSIE 9.0 && Trident/5.0IE9标准
IE9兼容性MSIE 7.0 && Trident/5.0IE7标准

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

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

 documentMode
IE7标准7
IE8标准8
IE9标准9
怪异(Quirks)5

(需要说明的是,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测试这个页面:

 请求头UAnavigator.userAgent条件注释documentModeJS引擎
IE8MSIE 8.0 && Trident/4.0MSIE 8.0 && Trident/4.0IE77IE7
IE9MSIE 9.0 && Trident/5.0MSIE 7.0 && Trident/5.0IE77IE7

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

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

 请求头UAnavigator.userAgent条件注释documentModeJS引擎
IE8MSIE 7.0 && Trident/4.0MSIE 7.0 && Trident/4.0IE77IE7
IE9MSIE 7.0 && Trident/5.0MSIE 7.0 && Trident/5.0IE77IE7

上表是完全符合预期的。

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

 请求头UAnavigator.userAgent条件注释documentModeJS引擎
IE8MSIE 7.0 && Trident/4.0MSIE 7.0 && Trident/4.0IE88IE8
IE9MSIE 7.0 && Trident/5.0MSIE 9.0 && Trident/5.0IE99IE9

这个结论其实跟测试一是一致的: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们,实在过于奇葩,不在本文范围内。

参考:

  1. Testing sites with Browser Mode vs. Doc Mode
  2. 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

 

 

转载于:https://www.cnblogs.com/hustskyking/archive/2013/06/08/browser-mode-and-doccument-mode.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/433472.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql 关联索引_mysql中关于关联索引的问题——对a,b,c三个字段建立联合索引,那么查询时使用其中的2个作为查询条件,是否还会走索引?...

情况描述&#xff1a;在MySQL的user表中&#xff0c;对a,b,c三个字段建立联合索引&#xff0c;那么查询时使用其中的2个作为查询条件&#xff0c;是否还会走索引&#xff1f;根据查询字段的位置不同来决定&#xff0c;如查询a, a,b a,b,c a,c 都可以走索引的&#…

android学习笔记之ProgressDialog的使用

在很多PC软件或手机软件中&#xff0c;我们都会看见 “加载中...” 类似的对话框&#xff0c;当然&#xff0c;在android应用程序中也是如此。如果我们想在android应用程序中使用这样的效果&#xff0c;那么就需要用到ProgressDialog。首先&#xff0c;我们来看一下ProgressDia…

asterisk 互联问题

asterisk A 和asterisk B互联。 A下面有账户1001&#xff0c;B下面有账户2001 当1001呼叫2001时&#xff0c;B的sip.conf里不能有1001。 当2001呼叫1001时&#xff0c;A的sip.conf里不能有2001。 否则&#xff0c;呼叫无法呼叫成功。 下面为截图 实际和在振铃时&#xff0…

Linux串口编程

.串口概述 常见数据通信方式:并行通信&#xff0c;串行通信 UART的主要操作&#xff1a; >数据发送及接受 >产生中断 >产生波特率 >Loopback模式 >红外模式 >自动流控模式 串口参数的配置主要包括:波特率、数据位、停止位、流控协议…

mysql查当前用户的的命令_mysql命令大全用户管理相关命令

grant 普通数据用户&#xff0c;查询、插入、更新、删除 数据库中所有表数据的权利。grant select on testdb.* to common_user’%’grant insert on testdb.* to common_user’%’grant update on testdb.* to common_user’%’grant delete on testdb.* to common_user’%’或…

ud分区删除工具_硬盘分区GPT分区怎么转MBR呢?硬盘分区GPT分区转MBR教程

很多用户的电脑预装的是win10系统&#xff0c;想要重装成win7系统。不过新电脑一般都是GPT分区&#xff0c;想要把win10重装成win7&#xff0c;首先需要将GPT分区转MBR。那么&#xff0c;硬盘分区GPT分区怎么转MBR呢?下面就让小编为大家带来硬盘分区GPT分区转MBR教程。提示:单…

使用Preference保存设置

Android中有四种持久化数据的方法&#xff1a;SQLite数据库、文件存储、Preference、ContentProvider。 四种方法各有专攻&#xff0c;而其中Preference是以类似Map的键值对形式存储的&#xff0c;最适合用来保存用户个人设置之类的信息。 可以用一个xml文件来配置一个设置界面…

调用支付jsapi缺少参数package_iOS微信支付(Swift)

前言微信支付的iOS的Demo不言而喻,所有的参数都是后台生成传过来的&#xff0c;完全没参考价值,并且有的注意点文档上也没说&#xff0c;现在我就说一下微信支付开发中需要注意的地方项目配置把实例项目中的一下文件拖到项目中Control文件夹下的WXApiManager.h和WXApiManager.m…

asterisk 支持 VP8 video编码 实现安卓的视频通话

1 :checkout Asterisk source code revision 373330 svn checkout -r 373330 http://svn.digium.com/svn/asterisk/trunk asterisk (下载最新asterisk版本) 2 &#xff1a;asterisk 上面需要打一个补丁支持 VP8 video编码 wget http://sipml5.googlecode.com/svn/trunk/aste…

C++ 11右值引用

C 11中引入的一个非常重要的概念就是右值引用。理解右值引用是学习“移动语义”&#xff08;move semantics&#xff09;的基础。而要理解右值引用&#xff0c;就必须先区分左值与右值。对左值和右值的一个最常见的误解是&#xff1a;等号左边的就是左值&#xff0c;等号右边的…

C++11中的右值引用及move语义编程

C0x中加入了右值引用&#xff0c;和move函数。右值引用出现之前我们只能用const引用来关联临时对象&#xff08;右值&#xff09;&#xff08;造孽的VS可以用非const引用关联临时对象&#xff0c;请忽略VS&#xff09;&#xff0c;所以我们不能修临时对象的内容&#xff0c;右值…

python入侵数据库数据库_一个简单的Python访问Mysql数据库例子

2020/11/3操作记录搭建好Python的数据环境之后&#xff0c;接下来就是在Python代码中访问数据库我先在Navicat图形化界面创建一个数据库命名为pythontest&#xff0c;再在数据库中创建了一个表studentinfo有nid,nname,ngrade,nage四个字段&#xff0c;nid为主键递增。通过查询编…

r语言散点图_R语言 | 散点图入门:以声学元音图为例

R语言语言学与R语言的碰撞Xu & YangPhoneticSan学习参考Discovering Statistics Using RStatistics for Linguistics with RHow to Do Linguistics with RR in ActionAnalyzing Linguistic DataR Graphics Cookbook Recap可以使用plot( )函数进行基础的制图。调用ggplot2包…

mysql创建表里主码和外码_SQL语言创建表时候怎么定义主码和外码

展开全部SQL语言创建表时候用Primary Key(属性名)定义主码&#xff0c;用Foreign Key(属性名)定义外码。主码是一种唯一关键字&#xff0c;表定62616964757a686964616fe59b9ee7ad9431333433623064义的一部分。一个表的主码可以由多个关键字共同组成&#xff0c;并且主码的列不能…

unity镜头边缘羽化_【后期修图】如何利用Ps中的自适应广角滤波器校正镜头失真?...

当用广角镜头拍摄对象时&#xff0c;透视问题通常以线条的形式出现&#xff0c;这应该是直的&#xff0c;但看起来是弯曲的和扭曲的。这通常被称为桶形失真&#xff0c;其主要发生在广角镜头中&#xff0c;因为图像的放大率越远&#xff0c;主体离镜头的光轴越远。简单来说&…

用引用返回值(转)

函数返回值时&#xff0c;要生成一个值的副本。而用引用返回值时&#xff0c;不生成值的副本。例如&#xff0c;下面的程序是有关引用返回的4种形式&#xff1a;//*********************//**   ch9_6.cpp  **//********************* #include <iostream.h> float tem…

mysql用binlog恢复数据_利用mysql的binlog恢复数据

MySQL Binary Log也就是常说的bin-log, ,是mysql执行改动产生的二进制日志文件,其主要作用有两个:* 数据回复* 主从数据库。用于slave端执行增删改&#xff0c;保持与master同步。1.开启binary log功能需要修改mysql的配置文件&#xff0c;本篇的实验环境是win7&#xff0c;配置…

python 怎么处理json_Python是怎样处理json模块的

首先&#xff0c;了解下什么是JSON&#xff1f;JSON&#xff1a;JavaScript Object Notation 【JavaScript 对象表示法】JSON 是一种轻量级的数据交换格式&#xff0c;完全独立于任何程序语言的文本格式。一般&#xff0c;后台应用程序将响应数据封装成JSON格式返回。JSON的基本…

UEditor1.2.6.0在.net环境下使用

UEditor1.2.6.0 1.百度百科词条 2.UEditor官方网站 【CKEditorCKFinder的配置实用&#xff0c;可查看博主另一篇文章】 第一次接触UEditor还是在2011年的下半年里&#xff0c;当时由于需要找一款富文本编辑器进行新闻的网站开发&#xff0c;当时UEditor异常较多&#xff0c;就将…

sql 删除数据_从零开始学SQL:是什么、如何安装、基本语法、表格(创建、删除、更新)、数据(插入、删除、更新)...

一、学习知识的黄金圈思维用黄金圈思维分析自己学习SQL&#xff0c;能增加自己的效率和坚持下去的动力。二、SQL基础知识1.数据库概念&#xff1a; database &#xff0c;按照数据结构来组织、存储和管理数据的仓库。2.关系数据库&#xff1a;多张表表之间的关系表&#xff1a;…