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