如果你使用的是IE9，那么按下F12键就会出现开发者工具，上面有两个下拉菜单：浏览器模式和文档模式。那么什么是浏览器模式？什么又是文档模式？二者有何区别？

浏览器模式用于切换IE针对该网页的默认文档模式、对不同版本浏览器的条件注释解析、以及发送给网站服务器的用户代理（User-Agent）字符串的值。网站可以根据浏览器返回的不同用户代理字符串判断浏览器的版本和及安装的功能，这样就可以根据不同的浏览器返回不同的页面内容了。

文档模式用于指定IE的页面排版引擎（Trident）以哪个版本的方式来解析并渲染网页代码。切换文档模式会导致网页被刷新，但不会更改用户代理字符串中的版本号，也不会从服务器重新下载网页。切换浏览器模式的同时，浏览器也会自动切换到相应的文档模式。

一言以蔽之，浏览器模式会影响服务器端对客户端浏览器版本的判断，对条件注释也有影响；而文档模式会影响IE的排版引擎，对网页渲染会有影响，对CSS hack也会产生影响。因此，通过条件注释可以判断浏览器模式，而使用CSS hack可以判断文档模式。

如果我们使用一句简单的JavaScript语句来查看用户代理（User-Agent）字符串的值，则可以看到IE9兼容性视图与IE9的区别：

<script type="text/javascript"> alert('UA:'+navigator.userAgent); < /script>

输出结果如下所示，注意其中的MSIE版本号已经不同。判断浏览器模式就是判断User-Agent中的版本号，即MSIE后面的数值：

// IE9 UA:Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; Tablet PC 2.0)

// IE9 兼容性视图 UA:Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; Tablet PC 2.0)

话说IE9兼容性视图是模拟IE7的行为，那么IE9兼容性视图与IE7有没有区别呢？肯定是有区别的，即使是IE9中的IE7标准模式，与原生的IE7在渲染上也是有区别的，具体我们暂不去深究。

那么既然IE9兼容性视图的版本号跟IE7相同，如何才能判断当前是IE9兼容性视图，还是纯正的IE7呢？其实很简单，只需要判断浏览器的用户代理（User-Agent）字符串中是否包含Trident即可。首先检测MSIE的版本号是否为7.0，然后再判断是否含有Trident字串，若包含则为IE9兼容性视图，否则则为纯正的IE7。

小结：至此，你应该了解了什么是浏览器模式、什么是文档模式以及它们之间的区别了，另外还了解了IE9兼容性视图与IE9以及IE7的区别。

控制默认的渲染方式

当Internet Explorer 9遇到未包含X-UA-Compatible标头的网页时，它将使用<!DOCTYPE>指令来确定如何显示该网页。 如果该指令丢失或未指定基于标准的文档类型，则Internet Explorer 9将以IE5模式（怪异模式）来显示该网页。

如果<!DOCTYPE>指令指定了基于标准的文档类型，则Internet Explorer 9将以IE9模式显示该网页，但出现以下情况时除外：

  • 为该网页启用了兼容性视图。
  • 该网页是在Intranet区域中加载的，并且已将Internet Explorer 9配置为使用兼容性视图来显示Intranet区域中的网页。
  • 已将Internet Explorer 9配置为使用兼容性视图来显示所有网站。
  • 已将Internet Explorer 9配置为使用兼容性视图列表（其实是个黑名单，其中指定了一组始终使用兼容性视图显示的网站）。
  • 已使用开发人员工具覆盖在该网页中指定的设置。
  • 该网页遇到了页面布局错误，并且已将Internet Explorer 9配置为，通过在兼容性视图中重新打开网页来自动从此类错误中恢复。

此外，可以使用下面的注册表项来控制Internet Explorer对未包含X-UA-Compatible标头的页面的处理方式。

HKEY_LOCAL_MACHINE (or HKEY_CURRENT_USER) SOFTWARE Microsoft Internet Explorer Main FeatureControl FEATURE_BROWSER_EMULATION iexplore.exe = (DWORD)

其中DWORD值必须等于下列值之一：

值    说明

7000 包含基于标准的 <!DOCTYPE> 指令的页面将以 IE7 模式显示。

8000 包含基于标准的 <!DOCTYPE> 指令的页面以 IE8 模式显示。

8888 页面始终以 IE8 模式显示，而不考虑 <!DOCTYPE> 指令。 （这可绕过前面列出的例外情况。）

关于IE浏览器确定文档模式的整个流程，可以参看这篇文章How IE8 Determines Document Mode，文中详细阐述了整个流程与内部机制。

小结：仍然坚持使用<!DOCTYPE html>，可最大程度减小发生错误的几率。

文档模式的检测

在JavaScript中可以通过documentMode来检测文档模式，在IE6和IE7中是使用compatMode来确定文档模式的，这个属性自IE8开始已经被documentMode所替代。

那么，如果需要兼容IE6和IE7的话（必须的 …），则相应的检测代码大致如下：

engine = null; if (window.navigator.appName == "Microsoft Internet Explorer"){ // This is an IE browser. What mode is the engine in? if (document.documentMode) // IE8 or later engine = document.documentMode; else{ engine = 5; // Assume quirks mode unless proven otherwise if (document.compatMode){ if (document.compatMode == "CSS1Compat") engine = 7; // standards mode } // There is no test for IE6 standards mode because that mode // was replaced by IE7 standards mode; there is no emulation. } // the engine variable now contains the document compatibility mode. }

IE6和IE7中的compatMode有两个可能的值“CSS1Compat”和“BackCompat ”，分别对应了IE6和IE7中的标准模式和怪异模式。上面的代码首先假定是怪异模式，然后再试图推翻假设。这里没有包含“IE6 标准模式”，因为它已经被IE7标准模式所替代，没有模拟的情况。

这里要注意，不同的文档模式对JavaScript也有一些影响，我们不必去深究不同文档模式对JavaScript有何种不同影响，只需要在编码时进行特定的特性检测即可。

小结：一般情况下是没必要进行文档模式检测的，对于样式兼容我们可以写CSS hack，而对于JavaScript来说，则更加推荐特性检测，而不是检测浏览器本身。

浏览器模式与文档模式之间的关系

浏览器模式可以决定页面默认的文档模式，但文档模式可能会受其他因素影响而改变，如上文所述。如果浏览器模式与文档模式设置不同的话，会不会有什么影响呢？

我们已经知道浏览器模式主要用于标识浏览器本身，原则上不会对页面渲染产生影响。但是我们又知道，浏览器模式可以影响条件注释，所以如果你的页面中有条件注释的话，那么浏览器模式的变化就会影响到页面渲染。

服务器端只能通过浏览器模式所标识的版本来确定客户端浏览器的版本，如果你将浏览器模式标识为IE9，但文档模式选择为IE7标准的话，就可能会有问题。不过这还要看服务器端是否有针对不同浏览器的处理策略，如果服务器端并未对不同浏览器的输出做差异化处理的话，那么这两个模式选项不同就不会有问题。

小结：如果服务器端对不同浏览器的输出做了差异化处理，那么浏览器模式和文档模式不一致就可能产生问题。

结语

本文参考了大量现有文献，详细阐述了各种模式的区别以及它们之间的关系。相信通过上面的叙述，你已经能够区分这些浏览器模式或者文档模式以及它们之间的关系了，每节的结论在小结中已有阐述，希望能够对你有所帮助。

摘自：http://ecd.tencent.com/browser-mode.html

IE9兼容性视图与IE9标准视图的更多相关文章

  1. .Net程序员学用Oracle系列(23)：视图理论、物化视图

    1.视图理论 1.1.视图的存储 1.2.视图的作用 1.3.视图的工作机制 1.4.视图的依赖性 1.5.可更新的连接视图 1.6.内联视图 2.物化视图 2.1.刷新物化视图 2.2.物化视图日志 ...

  2. mysql视图详解 mysql视图

    目录 22.1. ALTER VIEW语法 22.2. CREATE VIEW语法 22.3. DROP VIEW语法 22.4. SHOW CREATE VIEW语法 本章讨论了下述主题: ·    ...

  3. 表视图(UITableView)与表视图控制器(UITableViewController)

    表视图(UITableView)与表视图控制器(UITableViewController)其实是一回事. 表视图控制器是一种只能显示表视图的标准视图控制器,可在表视图占据整个视图时使用这种控制器.虽 ...

  4. Flask初学者：视图函数和类视图

    当一个url请求进入后台时,一般有两种方式来进行处理:视图函数和类视图.视图函数直接使用一个函数来进行处理并返回数据给浏览器,类视图则是使用类来进行处理并返回的,所以当需要进行的处理比较简单,则可以考 ...

  5. drf二次封装response-APIViews视图家族-视图工具集-工具视图-路由组件

    视图类传递参数给序列化类 (1).在视图类中实例化 序列化对象时,可以设置context内容. (2).在序列化类中的局部钩子.全局钩子.create.update方法中,都可以用self.conte ...

  6. SQL Server索引视图以（物化视图）及索引视图与查询重写

    本位出处:http://www.cnblogs.com/wy123/p/6041122.html 经常听Oracle的同学说起来物化视图,物化视图的作用之一就是可以实现查询重写,听起来有一种高大上的感 ...

  7. 视图(View)与部分视图(Partial View)之间数据传递

    写ASP.NET MVC程序,我们经常需要把数据从视图(View)传递至部分视图(Partial View) 或者相反. 今天Insus.NET使用 ControllerBase.TempData 进 ...

  8. iOS10 UI教程视图的绘制与视图控制器和视图

    iOS10 UI教程视图的绘制与视图控制器和视图 iOS10 UI视图的绘制 iOS10 UI教程视图的绘制与视图控制器和视图,在iOS中,有很多的绘图应用.这些应用大多是在UIView上进行绘制的. ...

  9. iOS10 UI教程视图的边界与视图的框架

    iOS10 UI教程视图的边界与视图的框架 iOS10 UI视图的边界 在视图的几何形状中我们提到了视图属性中的一部分属性可以将定义的视图绘制在屏幕上.其中典型的3个属性为边界属性.框架属性以及中心位 ...

随机推荐

  1. python centos上出现上下键和退格键均为乱码

    出现此问题主要是由于未安装readline,可以使用python自带的readline,具体设置方式为: 1.cd /Python-2.7.9 (下载包后的路径)2../configure3.vim ...

  2. html5 canvas画板

    点击查看演示地址 <!DOCTYPE HTML> <html> <title>HTML5-CanvasDrawDemo</title> <meta ...

  3. 文本处理命令--wc、sed

    一.wc wc命令的功能为统计指定文件中的字节数.字数.行数,并将统计结果显示输出. 测试文件内容: (my_python_env)[root@hadoop26 ~]# cat test hnlinu ...

  4. synchronized的重入

    /** * synchronized的重入 * */ public class SyncDubbo1 { public synchronized void method1(){ System.out. ...

  5. setting菜单界面的形成--未优化

    代码: first_preference.xml: <?xml version="1.0" encoding="utf-8"?> <Prefe ...

  6. Android sqlite3工具的使用

    sqlite3 <数据库名称> 进入数据库操作模式 eg: sqlite3 contacts.db .tables 查看所有的表 eg: .table .schema 查看查看库中所有表的 ...

  7. JQuery遍历指定id的div name值的几种方法

    JQuery遍历指定id的div name值的几种方法:方法一 $("#div1 :text").each(function () { var this_id = $(this). ...

  8. js控制div动起来

    代码: <html> <head> <title>让div动的测试</title> <script language="javascri ...

  9. Python2安装说明

    1.Python版本 Python 2.x的版本的,被称为Python2:是目前用的最广泛的,比如Python 2.7.12. Python 3.x的版本的,被称为Python3:是最新的版本的,比如 ...

  10. java-servlet-jsp

    =========================servletjavax.servlet    javax.servlet.http    javax.annotation    javax.ser ...