IE的浏览器模式和文档模式

一、概念

1、浏览器模式（Browser Mode）：

用于切换IE针对该网页的默认文本模式、对不同版本浏览器的条件注释解析、决定请求头里userAgent的值。它在浏览器发出请求之前就已经确定，服务器无法修改这个值。它代表的是用户以何种浏览器访问网站。IE8开始给UserAgent加上Trident信息，而Trident/6.0是IE10特有。

IE9支持下列浏览器模式：

浏览器模式	userAgent	默认文档模式
IE7	MSIE 7.0	IE7标准
IE8	MSIE 8.0 && Trident/4.0	IE8标准
IE9	MSIE 9.0 && Trident/5.0	IE9标准
IE9兼容性	MSIE 7.0 && Trident/5.0	IE7标准

2、文档模式（Document Mode）：

不同的文档模式对应不同的排版引擎，对应不同的JS引擎。每一种浏览器模式对应一种默认的文档模式，服务器还可以通过一些手段来更改文档模式，它代表的是浏览器以何种模式呈现页面。

IE9有下列文档模式：

文档模式	documentMode
怪异（Quirks）	5
IE7标准	7
IE8标准	8
IE9标准	9

文档模式的标准模式与怪异模式：

由于历史原因，各种浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility Mode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars mode)，这就是二者最简单的区别。

W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用新的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如微软的IE）。这样浏览器渲染上就产生了Quircks mode和Standars mode，两种渲染方法共存在一个浏览器上。

火狐一直工作在标准模式下，但IE（6，7，8）标准模式与怪异模式差别很大，主要体现在对盒子模型的解析上。IE8开始支持的渲染机制有：怪异模式（quirks mode）、完全标准模式（standards mode）和近似标准模式（almost standards mode），但开发者工具是无法选择近似标准模式的，实际上我们一般都选择完全标准模式。

标准模式与怪异模式在盒子模型中的区别：

二、应用

浏览器模式和文档模式用来解决IE各版本带来的兼容性问题。浏览器通过请求头里userAgent的值，告诉服务器当前是何种浏览器模式进行的请求并将用何种渲染方式进行渲染。

1、判断文档模式的方法：

1>js提供的方法：

                window.top.document.compatMode
                    BackCompat 表示怪异模式
                    CSS1Compat 表示标准模式
        2>jquery提供的方法：
                $.boxModel
                $.support.boxModel

2、设置文档模式的方法：

1>使用X-UA-Compatible

在页面中添加如下代码可以将文档模式改为IE7或其他标准。

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

在页面中添加如下代码可以将文档模式改为最新可用的标准。

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

2>使用DTD

Ⅰ设置为怪异模式：

方法1>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

方法2>什么也不加

Ⅱ设置为标准模式：

方法1>HTML4提供了三种DOCTYPE可供选择：

①过渡型（Transitional）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

②严格型（Strict）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

③框架型（Frameset）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

方法2>XHTML1.0提供了三种DOCTYPE可供选择：

①过渡型（Transitional）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

②严格型（Strict）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

③框架型（Frameset）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

参考：https://imququ.com/post/browser-mode-and-document-mode-in-ie.html

http://zengyouyuan.iteye.com/blog/1878938

IE的浏览器模式和文档模式相关推荐

谈IE的浏览器模式和文档模式
以前在 "IE8兼容视图(IE7 mode)与独立IE7的区别"一文中曾经涉及过浏览器模式和文档模式,但二者的区别却不甚了了,现在有了新的认识,再补充一下. 1.浏览器模式与文档模 ...
JS魔法堂：浏览器模式和文档模式怎么玩？
一.前言从IE8开始引入了文档兼容模式的概念,作为开发人员的我们可以在开发人员工具中通过"浏览器模式"和"文档模式"(IE11开始改为"浏览器模式& ...
再谈IE的浏览器模式和文档模式[转]
http://www.cnblogs.com/liuzhendong/archive/2012/04/27/2474363.html 以前在 "IE8兼容视图(IE7 mode)与独立IE7 ...
J2EE系列：再谈IE的浏览器模式和文档模式
以前在 "IE8兼容视图(IE7 mode)与独立IE7的区别"一文中曾经涉及过浏览器模式和文档模式,但二者的区别却不甚了了,现在有了新的认识,再补充一下. 1.浏览器模式与文档模 ...
html中ie9文档模式,IE9：强制IE9浏览器模式和文档模式(IE9: Force IE9 browser mode and document mode)...
IE9:强制IE9浏览器模式和文档模式(IE9: Force IE9 browser mode and document mode) 在IE9中,我的网页显示为Browser Mode: IE9 Co ...
html强制文档模式ie8,html5 – IE9：强制IE9浏览器模式和文档模式
有"边缘"模式. My Web Page Content goes here. 从链接的MSDN页面: Edge mode tells Windows Internet Explo ...
判断IE浏览器的文档模式以及浏览器模式
IE浏览器的浏览器模式和文档模式判断浏览器模式: function IEVersion() {var userAgent = navigator.userAgent; //取得浏览器的userAge ...
MVC模式和文档/视图结构
MVC(Model-View-Controller)模式的基本思想是数据,显示和处理相分离.模型(Model)负责数据管理,视图(View)负责数据显示,控制器(Controller)负责业务逻辑和响 ...
关于360浏览器兼容模式下文档模式默认以ie7标准渲染
有时网站在ie7的模式下是不兼容的,页面布局会乱,或则js代码不执行,我们只需要在网页head标签中加这么一句话 <meta http-equiv="X-UA-Compatible&q ...

IE的浏览器模式和文档模式

IE的浏览器模式和文档模式相关推荐

最新文章

热门文章