浏览器模式-文档模式-兼容性视图-终极解析(旧文首发)

2011-09-06

检测浏览器相关代码

javascript:alert(document.documentMode);[检查ie当前的渲染版本, ] 如7 8

javascript:alert(document.compatMode) [检查是混杂模式还是标准模式(依据css版本属性检查)]

javascript:alert(navigator.userAgent) [用户的客户端检查]浏览器内核检测

自定义浏览器渲染模式,meta的放置位置顺序:放在head之下,link和script标记之前

It must be included in the <HEAD> of the doc (assumes you aren't sending it down via HTTP header) AND it must come BEFORE tags like <script> and <link>. http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx.

[Compatibility View and "Smart Defaults" 兼容性视图和只能默认文档渲染

http://blogs.msdn.com/b/ie/archive/2009/06/17/compatibility-view-and-smart-defaults.aspx 来自该文章的评论的介绍]

X-UA-compatible 标头不区分大小写；不过，它必须显示在网页中除 title 元素和其他 meta 元素以外的所有其他元素之前的标头（HEAD 节（可能为英文网页））中。

[来自http://msdn.microsoft.com/en/library/cc288325.aspx 定义文档兼容性的一节"指定文档兼容性模式"]

在IE引入文档模式的概念后，其他浏览器也纷纷效仿。在此之后，IE又提出一种所谓的准标准模式（almost standards mode）。这种模式下的浏览器特性有很多都是符合标准的，但也不尽然。不标准的地方主要体现在处理图片间隙的时候（在表格中(不限于表格)使用图片时问题最明显）,后面有分析和解决办法。

[http://book.51cto.com/art/201006/207159.htm,js高级程序设计第二版第二章] 还没有整理

Basically, all the browsers have a “Quirks” mode, call it “Quirks mode", and use it to offer compatibility with pages that pre-date modern standards. All browsers have a “Standards” mode, call it “Standards mode,” and use it to offer a browser’s best implementation of web standards. Each version of each browser has its own Standards mode, because each version of each browser improves on its web standards support. There’s Safari 3’s Standards mode, Firefox 2’s Standards mode, IE6’s Standards mode, and IE7’s Standards mode, and they’re all different. We want to make IE8’s Standards mode much, much better than IE7’s Standards mode. .....

所有浏览器基本上有2种模式混杂和标准模式,每个浏览器每个版本都有各自的"标准模式",因为他们在不断的改进提升对web标准的支持,例如Safari 4 ff3 ie6 ie7 ie8 ,他们的标准模式都不一样,我们只想让ie8比ie7更接近标准

[Microsoft's Interoperability Principles and IE8 http://blogs.msdn.com/b/ie/archive/2008/03/03/microsoft-s-interoperability-principles-and-ie8.aspx ]

IE9 Compatibility View

IE9 reports a UA string, version vector, and document mode, as if it is IE7; however, the UA string also includes the Trident/5.0 tokenindicating that the browser is really IE9. Use this mode to test how IE9 users experience your site if they click on the Compatibility View button.

兼容性按钮的作用:当文档没有指定meta的X-UA字段时,用户点击了兼容性按钮,浏览器模式就会变为ie7,可用用户代理检测到.

[来自http://blogs.msdn.com/b/ie/archive/2010/10/19/testing-sites-with-browser-mode-vs-doc-mode.aspx ]

了解文档兼容性模式

了解文档兼容性的必要性(节选)

..........为了最大程度地降低这种风险，Internet Explorer 6 允许 Web 开发人员选择 Internet Explorer 用来解释和显示其网页的方式。默认为“Quirks 模式”；在这种模式下，将按照使用较旧的浏览器版本查看网页的方式来显示网页。 “标准模式”（也称为“严格模式”）的特点是可提供对行业标准的最大支持；但是，若要利用此增强的支持，网页中需要包括适当的 <!DOCTYPE> 指令。........

Internet Explorer 8 支持很多文档兼容性模式，这些模式启用不同的功能并可影响内容的显示方式。

“Emulate IE8”模式将告诉 Internet Explorer 使用 <!DOCTYPE> 指令(1混杂模式,2标准模式,3几乎标准模式)来确定如何呈现内容。标准模式指令(参考本文最后的图)将以 Internet Explorer 8 标准模式显示，而 Quirks 模式指令将以 IE5 模式显示。与 IE8 模式不同，“Emulate IE8”模式遵循 <!DOCTYPE> 指令。
“Emulate IE7”模式将告诉 Internet Explorer 使用 <!DOCTYPE> 指令来确定如何呈现内容。标准模式指令以 Internet Explorer 7 标准模式显示，而 Quirks 模式指令以 IE5 模式显示。与 IE7 模式不同，“模仿 IE7 模式”遵循 <!DOCTYPE> 指令。对于很多网站来说，这是首选的兼容性模式。
IE5 模式呈现内容的方式如同使用了 Internet Explorer 7 的 Quirks 模式来显示内容，这与 Internet Explorer 5 显示内容的方式非常相似。
无论页面是否包含 <!DOCTYPE> 指令，IE7 模式呈现内容的方式均如同使用了 Internet Explorer 7 的标准模式来显示内容。ie7的文档模式渲染
IE8 模式可最大程度地支持行业标准（包括 W3C 级联样式表级别 2.1 规范（可能为英文网页）和 W3C 选择器 API（可能为英文网页）），并提供对 W3C 级联样式表级别 3 规范（工作草案）（可能为英文网页）的有限支持。实际上就是ie8标准模式,其他同上,也就是 ie8的文档模式渲染
Edge 模式将告诉 Internet Explorer 以可用的最高级别模式显示内容。对于 Internet Explorer 8，这等同于 IE8 模式。假设 Internet Explorer 的将来版本支持更高级别的兼容性模式，那么，设置为 Edge 模式的页面将以该版本支持的最高级别的模式显示。当使用 Internet Explorer 8 查看时，这些相同的页面仍会以 IE8 模式显示。

由于 Edge 模式的文档使用查看网页所用的 Internet Explorer 版本可用的最高级别模式来显示网页，因此，建议仅将 Edge 模式用于测试页面和其他非生产活动。

[http://msdn.microsoft.com/en/library/cc288325.aspx 定义文档兼容性中文] [http://msdn.microsoft.com/en-us/library/cc288325.aspx 定义文档兼容性英文]

总结:

如果不想让用户手动开启兼容性视图,最好的办法就是隐藏他,而方法就是设置

最佳实践：

1.就是把这个值设置为ie=9（也就是ie9的标准模式），隐藏兼容性按钮之余，又有前瞻性，ie9普及时和项目也是鼎盛期，

或者也该改版了，就算出ie10也不落后，那至少是2012之后的事咯；

而且这个设置只不过是为了隐藏兼容性按钮，不让用户思考，实际上其他版本浏览器还是需要测试（时间允许的话）；

2.使用<!doctype html>后标准浏览器和ie8+都是标准模式，ie6 7除了quirks模式其余都是almost（准）标准模式

看图二【来源 http://hsivonen.iki.fi/doctype/ Activating Browser Modes with Doctype 】

以及【http://en.wikipedia.org/wiki/Quirks_mode 图表部分】

3.如果设置了 Emulate IE=8且页面的doctype严格型等,则开启标准模式，如果没有设置任何X-UA字段，则会按照设置了 Emulate IE=8的doctype类型来进行模式的选择（看下面的图1）；也就是ie8浏览器中X-UA可以不考虑ie8的所有开关；而ie7无论doctype是什么类型什么仿真字段都是almost（几乎）标准模式;

4.如果设置了IE=7/8/9/xxx，IE=7会使用almost标准模式（实际上任何情况除了quirks模式，都会开启almost标准模式，这个可以从 Activating Browser Modes with Doctype和维基的Quirks_mode看到，ieblog的图则显示为标准模式，或者就是他们所说的各个浏览器版本"各自的"标准模式"；这个也是和前2者有出入的地方）

5.值得一提的是,只要设置了X-UA-Compatible,并设置了对应的值,经测试去除了文档头,ie浏览器会显示对应的模式,而不是混杂模式,那么文档头是可以去除的,但是这并不实际.因为ie 7+ only

6.几乎标准和标准模式的差别,后面会进行分析;

其中的xxx可以是以下的值,其中edge介绍说是测试用

[http://msdn.microsoft.com/zh-cn/library/ms533876.aspx 来自 HTTP-EQUIV Attribute | httpEquiv Property]

介绍各种定义文档渲染模式指定的方法,注册表,服务器指定渲染模式等

[http://msdn.microsoft.com/zh-cn/library/cc288325(VS.85).aspx 定义文档兼容性中文]

实际工作中好像设置了X-UA-Compatible我们的测试工作会减轻(因为至少不用考虑1个浏览器的兼容情况,实际上这也只是时间上的花耗,并没有什么技术上的难点),所以到了现在各种情况都应该考虑,而不是一味只使用新技术(虽然开始的时候想能省即省,但随着深入,发觉并不是那回事...).....类似的就是qq的页面,或者是我想多了,

不过用在一般的企业行业展示站,这真的很实用,至少不用再考虑ie7了

ie8设置兼容性视图,再检查客户端,就会变为ie7标准模式这和文档渲染模式是分开的,文档渲染模式在不修改兼容性视图时可以使用ie7的(准)标准来解释(使用doctype来决定),但是设置了兼容性视图,就是ie7的标准模式

开发中文档渲染模式考虑绝大部份用户的浏览器呈现(少部分是开发者使用开发者工具检查...),而浏览器模式主要是测试用户代理时使用,(ietester某种意义上说就只有ie6有用了)

ie开发者工具能改变 文档渲染模式和 浏览器模式,实际作用就是用来测试, 对于ietester的789模式可以忽略了,只测试ie6就够,其余可以用ie8的开发者工具或者最新版本测试;

可以测试的版本有,ie789的标准模式,ie78的(几乎)准标注模式,依据doctype来决定是哪一种模式,具体看下图1

再补充一下图1中的3种情况:

1.如果指定仿真ie7或者ie8,就看doctype来决定选择对应 仿真ie7/8 的各自标准模式;否则就是 quirks模式

2.如果不指定仿真ie,但开了或设置开启(任何情况的)兼容性视图,或者微软的兼容性列表黑名单更新后存在该域名的情况下,则用仿真ie7渲染,标准模式的选择还是看doctype来决定使用哪一种标准模式,否则就是 quirks模式

3.如果除了以上各种情况,也就是不设置meta的X-UA,的话,1,如果有doctype则会使用 仿真ie8 渲染,2.否则就是 quirks模式

具体看这下图中文版看这http://www.iefans.net/ie8-wendang-moshi/

原版看着http://blogs.msdn.com/ie/archive/2010/03/02/how-ie8-determines-document-mode.aspx