浏览器工作模式之标准模式/怪异模式/近似标准模式

1、浏览器工作模式（渲染模式）分类

浏览器的工作模式被称为“渲染模式”，会影响“渲染方式+代码解析+脚本行为”；

从广泛的角度讲，浏览器的工作模式的差异体现在处理“HTML、XML、非web内容”；

目前渲染模式的分类主要有3种：标准模式（又名严格模式）、近似标准模式、混杂模式（又名怪异模式）。

通过document.compatMode可获知浏览器当前采用的渲染模式：

2、为何划分渲染模式

微软的IE6相比IE5.5进行了巨大改进，IE6支持了部分CSS1的特性，例如盒模型的理解、表格尺寸计算。块级元素的height和width在IE5.5中包括了内容+内边距+边框，而在IE6中仅包括内容。这导致IE6与IE5.5在CSS的解析和渲染时有很大差异。为了向后兼容，微软为用户提供了一个“开关”来选择浏览器的工作模式，这个开关就是DTD（document type definition）。

某些DTD会使IE6工作在“标准模式”，此模式使得页面以最新的CSS1方式处理；而某些DTD会使IE6工作在“混杂模式”，此模式使得页面以IE5.5的方式处理，这样就能保证以前在IE5.5中正常显示的页面在IE6中还能正常显示（即向后兼容）。混杂模式意味着：即使你用的是最高级的IE11浏览器，在混杂模式中我们面对的浏览器仍相当于老古董IE5.5，解析出来的HTML文档和IE5.5浏览器解析出来的效果一样。之后的IE7以及其他IE版本也采用此模式，但随着时间推进和标准进步，IE6/IE7中的标准模式已经逐渐不够“标准”了。所以IE8中重新定义了“标准模式”，更大程度地支持新的标准规范。为了向后兼容IE6/IE7，IE8新增了一种模式——“近似标准模式”，此模式相当于IE6/IE7中的“标准模式”。所以IE8以及之后的IE系列浏览器就有3种工作模式：标准模式+近似标准模式+混杂模式。

3、DOCTYPE的意义

在浏览器解析html文档正文前得先确定文档类型，以决定以何种方式渲染。渲染模式影响着浏览器对CSS代码甚至部分Javascript脚本的解析。

4、各种模式的触发条件

1） HTML文档中没有DOCTYPE声明触发混杂模式

2） HTML文档中用了错误的DOCTYPE会触发混杂模式

3） HTML文档中有DOCTYPE，但DOCTYPE不是放在文档最开始，其之前出现了其他内容（包括普通文本、HTML标签、HTML注释、XML声明、IE条件注释）

a) 若是普通文本和HTML标签，各浏览器均进入混杂模式

b) 若是HTML注释，不会在页面中展示出来，故非IE浏览器会忽略其存在，正确解析DOCTYPE；IE浏览器则会进入混杂模式

c) 若是XML声明，不会在页面中展示，故非IE浏览器会忽略其存在，而IE6则会进入混杂模式

d) 若是IE条件注释，各浏览器均进入标准模式。所以如果真想在DOCTYPE之前写东西但又想保证标准模式可以这样做：<![if IE]><!—comment--><![endif]>

4） HTML5的DOCTYPE：<!DOCTYPE html>触发的是标准模式

5） HTML4.01 Strict的DOCTYPE会触发标准模式：<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN””http://www.w3.org/TR/html4/strict.dtd”>

6） HTML4.01 Transitional的DOCTYPE会触发近似标准模式：<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

总结：尽量让浏览器使用标准模式进行渲染，这样能够将兼容性问题的风险降到最低。应该尽量保证DOCTYPE在文档绝对开头位置，而且尽量不在其之前插入任何内容。

附录: 一些常见的 doctype

Q 代表“混杂模式”，A 代表“接近标准模式”，S 代表“标准模式”