怪异模式（Quirks Mode）对 HTML 页面的影响（1）Quirks Mode 概述

look_w

Quirks Mode 概述定义什么是 Quirks Mode? 简单来说，Quirks Mode 就是浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式。
历史由渲染引擎产生的两种文档模式
谈到 Quirks modes 首先就要从浏览器渲染引擎说起。我们知道所有的浏览器都有自己的页面渲染引擎，渲染引擎主要包含两部分，一部分负责 HTML、CSS 代码的解析，另一部分负责脚本代码解析，这两部分合起来就可以绘制出完整的页面。
表 1 各浏览器渲染引擎构成IETrident--ChakraFirefoxGecko--SpiderMonkeyChromeWebkitWebcoreV8SafariWebkitWebcoreJavascriptcoreOperaPresto--Carakan
从表 1 可以看出，现在市面上的主流浏览器中除了 Chrome 和 Safari 都采用了 Webkit 渲染引擎，其余三种浏览器采用了各自不同的渲染方式（不同的 HTML    解析，不同的 JS 解析）。我们这里暂且先不讨论不同的渲染引擎绘制页面时的差异，单以每一种渲染引擎而言，随着版本的发展其渲染页面的方式也有很大的不同。
IE 是最早提出 Quirks Mode 与 Standards Mode（与 Quirks 相对应的一种模式）的，后来 Firefox、Chrome、Safari、Opera 等浏览器也都支持了这两种渲染方式。但是只有在 IE 中用户才可以自由地在两种方式之间切换，其他浏览器都是自动匹配其中一种。下文将主要以 IE 为例来说明 Quirks Mode 对页面绘制的影响，表 2 展示了 IE 随着其渲染引擎的发展，它对 HTML 页面的渲染改变如下。
表 2 IE 渲染引擎发展历史Trident 版本MSHTML.dll 版本IE 版本更新unversioned4.0.x4首发unversioned5.0.x5增加对 CSS1 的支持及改变对 CSS 的渲染unversioned5.5.x5.5修正部分 CSS 的排版控制unversioned6.0.x6修正 box model 的错误及新增 quirks Mode 的切换功能unversioned7.0.x7修正部分 CSS 排版错误以及增加对 PNGalpha 通道(半透明)4.08.0.x8第一个通过 Acid2 测试的版本5.09.0.x9首次支持 HTML5、SVG、CSS3 及采用新的 JavaScript 引擎6.010.0.x10支持 CSS3 多栏式排版、格子对齐、浮动式区块排版、渐变
从表 2 可以清晰的看出，随着 IE 的发展，其渲染引擎（早期为 MSHTML.dll，后来命名为 Trident）也在不断加入新的特性以及修正一些早先版本的错误。在    2001 年 IE6 正式发布之前，当时的市面主要就是 IE 和 Netscape 的 Navigator 两款浏览器，而 IE 拥有很大的用户群，所以大多数的页面都是针对    IE 而设计的，但是 IE 的渲染引擎却没有遵循 W3C 的规范，当时微软已经认识到 W3C 规范的重要性,所以当 IE 发展到 IE6 的时候，渲染引擎（MSHTML.dll）做出了一个重要的改变，将自己原先不符合 W3C 规范中的盒模型 box mode 绘制方式改为与 W3C 标准一致（后面会详细讨论），由于这个重大的改动，原先针对 IE 旧版本所设计的 HTML 页面都不能正确显示了，所以在 IE6 发布的时候附带了一个切换回 IE5 页面渲染方式的功能，这个功能中就首次提出了 Quirks Mode。
当用户需要显示旧版本的页面时切换到 Quirks Mode，这时浏览器的渲染引擎就切换到 IE5.5 所对应的版本(MSHTML.dll 5.5.x)，box mode 还是按照之前的方式绘制，这样页面就可以正确显示。当用户需要显示一些新的、满足 W3C 规范的页面时，渲染引擎切换到一个与 Quirks Mode 对应的 Standards Mode（标准模式），在此模式下渲染引擎就是当前的最新版本，这样也就满足了更多的 W3C 规范。这两种 Mode 之间的差别就是因为工作在不同版本的渲染引擎环境下。
最后，Quirks Mode 和 Standards Mode 合起来就称为浏览器的文档模式 Document Mode。
Quirks 和 Standards 之外的第三种模式
实际上，在上文提到的具有 Quirks 和 Standards 两种文档模式的浏览器中还存在第三种模式—Almost Standards Mode。这种模式和 Standards Mode 几乎一致，唯一的区别就在于某些情况下 Almost Standards Mode 会采用与 Quirks 相同的方式来绘制页面。比如当我们需要把图片分割后显示在一个表格单元中时，Almost Standards Mode 与 Quirks Mode 采用同样的绘制方式从而让图片显示不像在 Standards Mode 中那么的四分五裂。
但是这只是极少数的情况，在大部分情况下 Almost Standards 和 Standards 两种模式是一致的，所以我们一般不专门区分二者，后面我们会提到如何查看浏览器渲染引擎信息，在这个信息中同样对 Almost Standards Mode 和 Standards Mode 是不做区分的。
Quirks Mode 有两种
如果我们将 IE 升级到最新的 IE10 就会发现 IE10 除了拥有 IE7/8/9/10 Standards Mode 四种 Standards    Mode，同样还有拥有了两种 Quirks Mode：IE5 Quirks 和 IE10 Quirks。随着 IE10 发布而产生的这个新的怪异模式 IE10 Quirks 被认为是一种更好的支持了 HTML5 规范的 Quirks Mode。我们可以发现针对 HTML5 规范而设计的页面（如含有<audio>、<video>、<canvas>等标签）在 IE5Quirks 下是不能正确显示的，但是在 IE10 Quirks 下完全可以正确显示。也就是说，IE10 Quirks 是为了在那些针对 HTML5 设计，但是又没有添加 doctype(可以决定浏览器工作在哪种模式下，后面会详细讨论)的页面而存在的。
如何查看 Document Mode
IE 中，用户可以在 developer tools 中切换模式，如图 1 所示，IE10 的六种文档模式都被显示在 Document Mode 菜单下，用户可以直接选择，下一章的 Demo 我们都采用 IE10(version: 10.0.9200.16576)作为测试浏览器。
图 1 IE    Document Mode
除了从 developer tools 中查看，还有可以从 document 对象的属性 compatMode 中获知文档模式，这个属性只有两个值 BackCompat 和 CSS1Compat，前者对应的是 Quirks Mode 后者对应 Standards Mode。在 developer tools 中切换文档模式时，页面会自动刷新，compatMode 的值也会随之改变。