HTML 头声明引发的血案

一个月前，做bi项目时遇到一个怪问题，技术同学发现同样的表单元素放在不同的页面中表现样式相去甚远。由于bi项目周期较长新老交替的代码都有，所以很是苦恼。仔细对比代码发现完全相同的html代码和样式竟有不同的样式，后来发现原来是因为样式显示不对的页面的头用的是html4过渡类型的文档声明，而新页面的样式是在html5标准下编写的，故而导致显示效果不同。

http://w3help.org/zh-cn/casestudies/002   这个讲的太透彻了，截取其中一部分内容过来，详细的点下链接仔细看吧。

DOCTYPE，或者称为 Document Type Declaration（文档类型声明，缩写 DTD）。通常情况下，DOCTYPE 位于一个 HTML 文档的最前面的位置，位于根元素 HTML 的起始标签之前。因为浏览器必须在解析 HTML 文档正文之前就确定当前文档的类型，以决定其需要采用的渲染模式，不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析。尤其是在 IE 系列浏览器中，由 DOCTYPE 所决定的 HTML 页面的渲染模式至关重要。

首先看看当一个 HTML 文档在没有 DOCTYPE 时，页面在各浏览器中会如何渲染及解析。我们尝试生成一个在最顶端没有 DOCTYPE 的 HTML 文档：

这个页面在所有的浏览器中均返回一致的结果，页面上打印出了“BackCompat”。document.compatMode 属性最初由微软在 IE 中创造出来，这是一个只读的属性，返回一个字符串，只可能存在两种返回值：

• BackCompat：标准兼容模式（Standards-compliant mode）未开启；
• CSS1Compat：标准兼容模式已开启。

其实这里所谓的标准兼容模式未开启即“混杂模式”（又叫怪异模式，Quirks mode），标准兼容模式已开启即“标准模式”（又叫严格模式，Standards mode 或者 Strict mode）。所以前面那个测试样例中，没有书写 DOCTYPE 的 HTML 文档在所有浏览器中均会以混杂模式进行渲染和解析。

浏览器的工作模式常被称为“渲染模式”。实际上浏览器不同的工作模式不仅对渲染有影响，对代码的解析以及脚本的行为也同样有影响。

从更广泛的角度来看，浏览器的工作模式的差异不仅体现在处理 HTML 页面的时候，处理 XML 及一些非 WEB 内容时也有模式上的差异。

不使用 DOCTYPE 一定会使 HTML 文档处于混杂模式，然而使用了 DOCTYPE，也不一定就能够使文档在所有浏览器中均处于标准模式。DOCTYPE 本身不就是一个“开关”吗？为何在有 DOCTYPE 的 HTML 文档之上仍然还会出现混杂模式？这个和以下条件有关：

• 使用了本身就会使浏览器进入混杂模式的古老的甚至是错误的 DOCTYPE；
• 在 DOCTYPE 之前出现了其他内容，如注释，甚至是 HTML 标签。

我们先说第一个条件。HTML 历史悠久，仅正确的 HTML 类型的 DOCTYPE 就有很多种。先看一个标准的 DOCTYPE：

上面的 DOCTYPE 包含 6 部分：

1. 字符串“
2. 根元素通用标识符“HTML”
3. 字符串“PUBLIC”
4. 被引号括起来的公共标识符（publicId）“-//W3C//DTD HTML 4.01//EN”
5. 被引号括起来的系统标识符（systemId）“http://www.w3.org/TR/html4/strict.dtd”
6. 字符串“>”

其中根元素通用标识符、公共标识符、系统标识符均可以通过脚本调用 DOM 接口获得，分别对应 document.doctype.name、document.doctype.publicId、document.doctype.systemId（IE6 IE7 不支持）。

不同的 DOCTYPE 之间，上面三部分可能不尽相同，有些 DOCTYPE 确实其中某部分，如何在这些纷繁的 DOCTYPE 中选择？

其实浏览器在嗅探 DOCTYPE 时只考虑了上述 6 部分中的第 1、2、4、6 部分，且不区分大小写。在各浏览器内核实现中，几乎都存在一个名单用于记录这些常见的 DOCTYPE 所对应的模式，例如 WebKit 内核中 DocTypeStrings.gperf 文件。各浏览器名单列表中触发模式的不同导致了某些 DOCTYPE 出现在不同浏览器中触发了不同模式的现象，如 。而对于名单之外的 DOCTYPE，浏览器之间处理的差异也会导致触发不同的模式，比如可能有的浏览器会将名单之外的 DOCTYPE 当作混杂模式，而有的却会一律当作标准模式。

所以我们在选用 DOCTYPE 的时候首先确定的是我们想让 HTML 文档使用标准模式。

如果力求最简，则 HTML5 的 DOCTYPE 是最佳选择：，所有的主流浏览器均将这种只包含第 1、2、6 部分的最短的 DOCTYPE 视为标准模式。

如果力求稳妥，则较早的 HTML4.01 Strict 的 DOCTYPE 也是一种好的选择：，它在各主流浏览器中触发的模式与上面的 HTML5 的完全一致。

有时候我们处于特殊情况也希望浏览器能够都处于近似标准模式，则可选择：。