浏览器中的渲染模式

Quirks 模式是指 Web 浏览器保持向后兼容的一种技术，它可兼容只适用于旧版浏览器中的网页，从而不适用标准模式中的 W3C 严格解释和 IETF 标准。

概述

web 网页的结构和外观被两中标准化语言共同描述：HTML，web 中用来设计的标记语言，它描述了网页的内容和结构；CSS，广义样式表语言，用于指定各种媒体中的页面应该如何被渲染（屏幕显示的视觉样式，当打印页面时使用的打印样式，使用屏幕阅读器阅读网页的听觉样式等）。但是，大多数旧的 Web 浏览器要么没有完全实现这些语言的规范，要么基于之前的最终标准来开发（例如：在2001年发布的用于 Macintosh 平台的 Microsoft Internet Explorer 5.1，是第一个完全支持 CSS 1 的主要 web 浏览器）。因此，许多旧的 Web 网页结构依赖于旧浏览器中不完整或不正确的实现，而且当这样的浏览器进行处理时只会为其专门渲染。

近些年来，主要的 web 浏览器对 HTML 和 CSS 标准化的支持有着明显的改善，但是大部分依赖于旧浏览器的 quirks 遗留文档呈现了对浏览器开发者们的阻碍，开发者们希望改进浏览器对 HTML 和 CSS 标准化的支持，但也希望能维持向后兼容的旧的、非标准化的网页。此外，许多新的网页继续按照原先的方式创建，因为浏览器开发者们介绍的兼容性解决方法意味着这样一种理解：标准化的方法并不是绝对必要。

为了保持大部分 web 网页在不同浏览器中尽可能多的相兼容，目前的 Web 浏览器一般都具有多个渲染模式：在“标准模式”中，网页根据 HTML 和 CSS 规范被渲染，而在“怪癖（quirks）模式”中则试图去效仿旧浏览器中的行为。某些浏览器（例如那些基于 Mozilla Gecko 渲染引擎的浏览器）将使用“近似（Almost）标准”的模式来试图在两者中进行妥协，实现了 table cell sizing 的 quirk，而其它方面则符合规范。


文档类型的比较

Henri Sivonen 编写了含有各种文件类型的网页在大多数普通浏览器中的展现方式：Quirks、Standards、Almost 标准中的任意一种模式。为“Almost Standards” 使用标准是对 table cell height 进行非标准渲染。

NS6 Gecko Safari Opera IE 7 IE 6 IE Mac Konq NS6 Gecko Safari Opera IE 7 IE 6 IE Mac Konq Doctype pre-1.0.1 Gecko 1.0.1+ & 9 Opera 7.5 & Opera 7.10 & Opera 7.0 3.2 Doctype pre-1.0.1 Gecko 1.0.1+ & 9 Opera 7.5 & Opera 7.10 & Opera 7.0 3.2

None	Q	Q	Q	Q	Q	Q	Q	Q	Q
HTML 3.2 doctype	Q	Q	Q	Q	Q	Q	Q	Q	Q
HTML 4.0 Strict doctype without system identifier	S	S	S	S	S	A	A	A	A
HTML 4.01 Strict doctype without system identifier	S	S	S	S	S	A	A	Q	A
HTML 4.0 Strict doctype with system identifier	S	S	S	S	S	A	A	A	A
HTML 4.01 Strict doctype with system identifier	S	S	S	S	S	A	A	A	A
HTML 4.0 Transitional doctype without system identifier	Q	Q	Q	Q	Q	Q	Q	Q	Q
HTML 4.01 Transitional doctype without system identifier	Q	Q	Q	Q	Q	Q	Q	Q	Q
HTML 4.01 Transitional doctype with system identifier	S	S	A	A	A	A	A	A	Q
HTML 4.01 Transitional doctype with system identifier	Q	S	A	A	A	A	A	A	Q
HTML 4.0 Transitional doctype with system identifier	Q	Q	Q	Q	A	A	A	A	Q
XHTML 1.0 Strict doctype without an XML declaration	S	S	S	S	S	A	A	A	A
XHTML 1.0 Transitional doctype without an XML declaration	S	S	A	A	A	A	A	A	Q
XHTML 1.0 Strict doctype with an XML declaration <?xml version="1.0" encoding="UTF-8"?>	S	S	S	S	S	A	Q	A	Q
XHTML 1.0 Transitional doctype with an XML declaration <?xml version="1.0" encoding="UTF-8"?>	S	S	A	A	A	A	Q	A	Q
ISO HTML 2000 version doctype, short form	Q	S	S	Q	Q	Q	Q	Q	Q
ISO HTML 2000 version doctype, long form	Q	S	S	S	S	A	A	A	Q
ISO HTML 1999 version doctype, short form	S	S	S	Q	Q	Q	Q	Q	Q
ISO HTML 1999 version doctype, long form	S	S	S	S	S	A	A	A	Q
HTML5	Q	S	S	S	S	A	A	A

模式的差异和实例

在 quirks 和 standards 模式之间最显著的一个区别就是 Internet Explorer 在处理 CSS 盒子模型时的 bug。在版本 6 以前， Internet Explorer 在判定一个元素盒子的宽度时所使用的算法与 CSS 规范中的算法在细节上有冲突，而且由于 IE 浏览器的普及，很多被创建的网页都依赖于这个不正确的算法。对此就版本 6而言，当渲染使用 standards 模式时，IE 将使用 CSS 的规范算法；当渲染使用 quirks 模式时，IE 将使用之前的非标准算法。

另一个值得注意的区别就是行内某些元素的垂直对齐方式；虽然 CSS 的规范要求它们与盒子内的文本基线对齐，但许多老版本浏览器的图像是与所在盒子的底部边框对齐。在 standards 模式中，基于 Gecko 的浏览器将与基线对齐，但是在 quirks 模式中，它们将与底部对齐。

此外，许多旧的浏览器不能实现 table 中字体样式的继承；这样一来，即使 CSS 规范要求 table 中的字体样式可继承, 但还是必须每次为其写一个特定的单独样式，并为 table 也写一个。如果字体大小被指定使用相对单位，那么符合标准的浏览器将会继承字体大小的基数，然后再把相对字体的大小赋予到 table 内：例如，一个页面声明了字体大小的基数为 80％，table 里面的字体大小也为 80%（以确保浏览器中字体 80% 的大小不能够被正确的继承），在符合标准的浏览器中，table 中字体将显示为 64％（80％的80％）。因此，在 quirks 模式中，浏览器通常不会继承 table 的字体大小。

Almost standards 模式

基于 Gecko 1.0.1 以后的浏览器（如Firefox），Safari 和 Opera 7.5（及以后版本）有三分之一的兼容模式被看为“almost standards 模式”，它保持了“传统”的 table cell 的垂直大小，与 CSS2 的规范相违背。但这有效地使它们的应用更加接近于 Internet Explorer 的 standards 模式。

“Almost standards”渲染模式与“standards”模式在很多细节上极其相似。首先，在 table cell 内的图片布局按照 Gecko 中的 “quirks”模式进行处理，这相当于和其它浏览器保持一致，例如 IE。这意味着，当在“quirks”或者“almost standards”模式下， table 中分割图片的布局在 Mozilla 1.0.1 或以后的基于 Gecko 渲染引擎的浏览器中不大可能会发生变化。


模式验证

在大多数最新的浏览器中，文档对象模型的属性 document.compatMode 表示当前页面的渲染模式——在 standards 模式下， document.compatMode 包含值“CSS1Compat”，而在 quirks 模式下，它包含值“BackCompat”。

此外，在 Mozilla Firefox 和 Opera 中，一个给定的页面所使用的渲染模式将会在"页面信息"的信息框中显示。

本文是使用 B3log Solo 从 b3log-vanessa 进行同步发布的

原文地址： http://b3log-vanessa.appspot.com/articles/2010/11/02/1288686322099.html