怪异模式

在计算机领域中，怪异模式（quirks mode）是网页浏览器为了向后兼容针对旧版浏览器设计的网页而使用的模式，与严格遵循万维网联盟（W3C）与互联网工程任务组（IETF）标准设计的标准模式（standard mode）相对。这一行为现已规范化，所以“标准模式”现在也称为非怪异模式（no quirks mode）。

## 概述

网页的结构与外观由两种标准化的语言的组合所描述：

- HTML，一种专为网页设计的置标语言，描述页面的结构与内容；及
- CSS，一种广义的样式表语言，指定页面在不同媒介中（屏幕显示器的视觉样式、打印页面时的打印样式、页面被屏幕阅读器所阅读时的听觉样式等）应如何渲染。

然而，多数较旧的网页浏览器没有完全实现这些语言的标准，或者浏览器开发时标准还没完成（例如，Macintosh平台上的Microsoft Internet Explorer 5.0版本发行于2000年，是最早完全支持CSS Level 1的主流网页浏览器）。结果是，很多较旧的网页依赖早期浏览器对标准不完整甚至不正确的实现，所以只有这样的早期浏览器才会按照预想的方式渲染这些网页。

主流浏览器对标准化的HTML和CSS的支持已得到了显著的提高，但是大量早期的文档依赖旧版浏览器的怪异行为，这就为浏览器开发者制造了麻烦，因为浏览器开发者既希望改善对标准化的HTML及CSS的支持，又想保持对早期非标准化网页的向后兼容。此外，浏览器向后兼容老式写法，也就表示了解标准写法并不是必须的，所以仍有大量新网页是以老式的非标准写法编写的。

为了与可能数量众多的网页维持兼容，现代的网页浏览器一般具有多种渲染模式：在“标准模式”下，页面按照HTML与CSS标准渲染；而在“怪异模式”下，浏览器则尝试模拟更旧的浏览器的行为。一些浏览器（例如，基于Mozilla的Gecko渲染引擎的浏览器，或者严格模式下的Internet Explorer 8）也使用一种尝试于这两者之间妥协的“近乎标准”（almost standards）模式，该模式实现了一种表单元格尺寸的怪异行为，其余行为则符合标准定义。

## 模式之间的差异和示例

对CSS IE盒模型缺陷的处理方式不同，是怪异模式和非怪异模式的一大显著差异。Internet Explorer 6之前，Internet Explorer决定某元素的盒模型宽、高度的算法与CSS规范冲突，由于Internet Explorer普及度高，很多网页依赖于这种不正确的算法。而Internet Explorer 6在标准模式下渲染时使用了CSS的规范算法，而在怪异模式下使用先前的不规范算法。

另一个值得一提的差异是某些行内（inline）元素的垂直对齐。很多早期的浏览器对齐图片至包含它们的盒子的下边框，而CSS的规范要求将这些图片对齐至盒内文本的基线。标准模式下，基于Gecko的浏览器将会对齐至基线，而在怪异模式下它们会对齐至底部。

此外，很多早期的浏览器对表格内部的字体样式不实施继承；结果是，字体样式必须为整个文档作为一个整体指定一次，并且为表格再次指定一次，尽管CSS规范要求字体样式要继承进表格。如果字号使用相对单位指定，按照标准渲染的浏览器会继承基准字号，然后应用于表格内的相对字号：比如，假如页面声明了基准字号是80%、表格字号为80%（以保证在不正确继承字号的浏览器中字号仍为80%），符合标准的浏览器显示的表格字号会是64%（80%的80%）。结果，浏览器在怪异模式下一般不对表格继承字号。

### 有限怪异模式

“有限怪异模式”（limited quirks mode，曾用名“接近标准模式”或“严格模式”，"almost standards mode"或"strict mode"）是第三种兼容性模式。该模式根据CSS2的规范维持了“传统的”表单元格的垂直方向大小调整方式，已在下列浏览器中实现：Safari, Opera 7.5（及以上），所有基于Gecko（自1.0.1）的浏览器（比如Firefox）和Internet Explorer 8。

“接近标准”渲染模式与“标准”模式只有一处不同，其它细节完全一致。接近标准模式下，表单元格内部图片的布局与“怪异”模式下相同，这与Internet Explorer 7（以及更早）等旧有系统浏览器相当一致。这意味着，使用表格内图像片的布局在“怪异”或“接近标准”模式下，比在“标准”模式下更不容易分崩离析。

## 触发不同渲染模式

通常，浏览器基于页面中文件类型描述的存在以决定采用哪种渲染模式；如果存在一个完整的DOCTYPE则浏览器将会采用标准模式，而如果它缺失则浏览器将会采用怪异模式。例如，一个以如下DOCTYPE开始的网页将会触发标准模式：

```html4strict
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
```

如下DOCTYPE语法上是无效的，因为它包含公共标识符关键字PUBLIC却没有公共标识符（指示所用HTML版本的名称），也没有HTML文档类型定义的系统标识符URL。这将会触发怪异模式：

```html4strict
<!DOCTYPE html PUBLIC>
```

此外，一个不含任何DOCTYPE的网页将会以quirks模式渲染。

对此一个值得一提的例外是微软的Internet Explorer 6浏览器，如果DOCTYPE之前有一个XML声明，不管是否指定完整的DOCTYPE，它就会以quirks模式渲染一个页面。因此以如下代码开始的XHTML页面会被IE 6渲染为quirks模式：

```html4strict
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
```

在一定程度上，上述代码是有用的，然而它仅仅会对IE 6触发怪异模式。

如果DOCTYPE之前有任何语句，quirks模式在任何版本的IE中（截至IE 9）同样会被触发。例如，如果一个超文本文件在DOCTYPE前包含一个注释或者任何标签，IE（截至9）会使用quirks模式：

```html4strict
<!-- This comment will put IE 6, 7, 8, and 9 in quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
```

XML声明的问题在Internet Explorer 7中被解决了，在此XML声明只是简单的被忽略。然而，为对现存和更早的网页浏览器的最大程度的兼容，万维网联盟，维持XML规范的组织，建议XHTML文件的作者可以考虑省略XML声明。

### 文档类型的比较

Henri Sivonen编译了一个不同文档类型以及在最常见的浏览器中它们被如何对待的清单，展示了这些情况下，页面是否被渲染为怪异（Q），标准（S）或接近标准（A）模式。接近标准模式的判定标准是非标准的表单元格高度的渲染。这个表格应用于Content-Type为text/html的内容。Content-Type为application/xhtml+xml的内容在Chrome, Firefox, Internet Explorer 9（以及10）, Safari和Opera被渲染为标准模式。Internet Explorer 6, 7和8不支持application/xhtml+xml的Content-Type。

Doctype｜NS6｜Mozilla 0.9.5-1.0｜IE 8+FirefoxChromeSafariOpera 7.5+Netscape 7+Mozilla 1.0.1+Konq 3.5+HTML5 spec｜IE 7Opera 7.10｜IE 6Opera 7.0｜Mac IE 5｜Konq 3.2

无｜否 Q｜否 Q｜否 Q｜否 Q｜否 Q｜否 Q｜否 Q

`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">`｜否 Q｜否 Q｜否 Q｜否 Q｜否 Q｜否 Q｜否 Q

Strict｜有系统标识符`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">`｜是 S｜是 S｜是 S｜A｜A｜A｜A

无系统标识符`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">`｜是 S｜是 S｜是 S｜A｜A｜否 Q｜A

Transitional｜有系统标识符`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">`｜是 S｜是 S｜A｜A｜A｜A｜否 Q

无系统标识符`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">`｜否 Q｜否 Q｜否 Q｜否 Q｜否 Q｜否 Q｜否 Q

`<!DOCTYPE html>`｜否 Q｜是 S｜是 S｜A｜A｜A｜?

有系统标识符且无XML声明`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">`｜是 S｜是 S｜是 S｜A｜A｜A｜A

Strict｜有系统标识符和XML声明`<?xml version="1.0" encoding="UTF-8"?>``<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">`｜是 S｜是 S｜是 S｜A｜否 Q｜A｜否 Q

有系统标识符且无XML声明`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">`｜是 S｜是 S｜是 S｜A｜A｜A｜A

无系统标识符，也无XML声明`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">`｜是 S｜是 S｜是 S｜A｜A｜A｜?

Transitional｜有系统标识符且有XML声明`<?xml version="1.0" encoding="UTF-8"?>` `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`｜是 S｜是 S｜A｜A｜否 Q｜A｜否 Q

有系统标识符，无XML声明`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`｜是 S｜是 S｜A｜A｜A｜A｜否 Q

无系统标识符，无XML声明`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">`｜是 S｜是 S｜A｜A｜A｜A｜?

有系统标识符和XML声明`<?xml version="1.0" encoding="UTF-8"?>``<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">`｜是 S｜是 S｜是 S｜A｜否 Q｜A｜否 Q

有系统标识符，无XML声明`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">`｜是 S｜是 S｜是 S｜A｜A｜A｜A

Doctype｜NS6｜Mozilla 0.9.5-1.0｜IE 8+FirefoxChromeSafariOpera 7.5+Netscape 7+Mozilla 1.0.1+Konq 3.5+HTML5 spec｜IE 7Opera 7.10｜IE 6Opera 7.0｜Mac IE 5｜Konq 3.2

### 模式验证

在绝大多数浏览器，文档对象模型的扩展`document.compatMode`指示当前页面的渲染模式。在标准模式和接近标准模式，`document.compatMode`包含值CSS1Compat，然而在怪异模式该值为BackCompat。

此外，在Mozilla Firefox和Opera一个给定页面的渲染模式也被指示在“页面信息”的信息框中。而在Internet Explorer 8及更高版本的IE中，文档模式被显示于Internet Explorer开发人员工具中，且可以被用户更改。在Internet Explorer中还有`document.documentMode`的私有JavaScript扩展，其取值为5, 7, 8, 9, 10之一的浮点型变量。

## 外部链接

- Eric Meyer on CSS: Picking a Rendering Mode
- Quirksmode.org: Quirks mode and strict mode
- Documentation for quirks mode in Mozilla-based browsers
- Opera Software's explanation of quirks mode in their browser
- The W3C Markup Validation Service
- Bookmarklet that reports the mode of a document
- MDC explanation of Mozilla's DOCTYPE sniffing
- Testing doctype handling in browser
- Joel Spolsky on Web standards