Quirks模式

**怪異模式**（英語：**quirks mode**）是指在計算機領域中，一些網頁瀏覽器為了維持對較舊的網頁設計的向後兼容性，而使用的一種技術，有別於嚴格遵循全球資訊網聯盟（W3C）與網際網路工程任務組（IETF）標準而設計的「標準模式」。

## 概述

一個網頁的結構與外觀由兩種標準化的語言的組合所描述：HTML，一種設計用於網頁的置標語言，描述頁面的結構與內容，和 CSS，一種廣義的樣式表語言，用以指定頁面在不同媒介中（屏幕顯示器的視覺樣式，列印頁面時的列印樣式，頁面被屏幕閱讀器所閱讀時的聽覺樣式等）該如何被渲染。然而，多數舊的網頁瀏覽器沒有完全實施這些語言的定義或者在這些定義完成之前就已被開發（比如，Macintosh 平台上的 Microsoft Internet Explorer 版本 5.0 發行於 2000 年，在主流網頁瀏覽器中最早完全支持 CSS Level 1）。結果是，很多更早的網頁依賴於早期瀏覽器不完全或不正確的解析而構造，並且只有在被這樣的瀏覽器處理時才會如設想之中那樣渲染。

主流瀏覽器對標準化的 HTML 和 CSS 的支持已得到了顯著的提高，但是舊版的文檔中的很大一部分依賴於舊版瀏覽器的 quirks，對瀏覽器開發者形成了一個障礙，他們想提高它們對標準化的 HTML 及 CSS 的支持，卻同樣想對早期的非標準化頁面保持向後兼容。此外，很多新的網頁繼續以舊的方式被建造出來，由於瀏覽器開發者所引進的兼容性解決方案意味著對標準化方法的理解並不是嚴格必要的。

為了與可能數量眾多的網頁維持兼容，現代的網頁瀏覽器一般具有多種渲染模式：在「標準模式」（standards mode）頁面按照 HTML 與 CSS 的定義渲染，而在「quirks 模式」中則嘗試模擬更舊的瀏覽器的行為。一些瀏覽器（例如，那些基於 Mozilla 的 Gecko 渲染引擎的，或者 Internet Explorer 8 在 _strict mode_ 下）也使用一種嘗試於這兩者之間妥協的「近乎標準」（almost standards）模式，實施了一種表單元格尺寸的怪異行為，除此之外符合標準定義。

## 模式之間的差異和示例

在 quirks 模式和標準模式之間一個突出的不同是對 CSS IE 盒模型缺陷的處理。在第 6 版之前，Internet Explorer 曾經使用一種決定一個元素的盒模型的寬度和高度的，與 CSS 規範所指定相衝突的算法，而且由於 Internet Explorer 的流行，很多依賴於這種不正確的算法的網頁被創建。而在版本 6, Internet Explorer 在標準模式下渲染時使用了 CSS 規範的算法，而在 quirks 模式下使用先前的，不規範的算法。

另一個值得一提的不同點是某些行內（inline）元素的垂直對齊；很多早期的瀏覽器對齊圖片至包含它們的盒子的下邊框，雖然 CSS 的規範要求它們被對齊至盒內文本的基線。標準模式下，基於 Gecko 的瀏覽器將會對齊至基線，而在 quirks 模式下它們會對齊至底部。

此外，很多早期的瀏覽器對表格內部的字體樣式不實施繼承；結果是，字體樣式必須為整個文檔作為一個整體指定一次，並且為表格再次指定一次，儘管 CSS 規範要求字體樣式被繼承進表格。如果字號使用相對單位指定，一個標準兼容的瀏覽器會繼承基準字號，然後應用於表格內的相對字號：比如，一個聲明了基準字號為 80% 的頁面內聲明表格為 80%（以保證在不正確繼承字號的瀏覽器中有 80% 的字號）的字號將會，在一個標準兼容的瀏覽器里，顯示具有 64% 字號的表格。結果是，瀏覽器在怪異模式典型的不對表格繼承字號。.

### 接近標準模式

根據 CSS2 的規範維持了「傳統的」表單元格的垂直方向大小調整的叫做「接近標準模式」（almost standards mode）或者「嚴格模式」（strict mode）的第三種兼容性模式，已被在這些瀏覽器中實施：Safari, Opera 7.5（和以上），所有基於 Gecko（自 1.0.1）的瀏覽器（比如 Firefox）和 Internet Explorer 8。

「接近標準」模式的渲染和「標準」模式除了一點之外，在所有細節上相匹配。表單元格內部圖片的布局採用和「quirks」模式相同的方式被處理，而不是按照標準，這點和例如 Internet Explorer 7（以及更早）的舊有瀏覽器相當一致。這意味著使用表格內圖像片的布局在「quirks」或「接近標準」模式下的瀏覽器中，比起「標準」模式下，更不至於分崩離析。

## 觸發不同渲染模式

通常，瀏覽器基於頁面中文件類型描述的存在以決定採用哪種渲染模式；如果存在一個完整的 DOCTYPE 則瀏覽器將會採用標準模式，而如果它缺失則瀏覽器將會採用怪異模式。例如，一個以如下 DOCTYPE 開始的網頁將會觸發標準模式：

如下 DOCTYPE 語法上是無效的，因為它包含公共標識符關鍵字 PUBLIC 卻沒有公共標識符（指示所用 HTML 版本的名稱），也沒有 HTML 文檔類型定義的系統標識符 URL。這將會觸發怪異模式：

此外，一個不含任何 DOCTYPE 的網頁將會以 quirks 模式渲染。

對此一個值得一提的例外是微軟的 Internet Explorer 6 瀏覽器，如果 DOCTYPE 之前有一個 XML 聲明，不管是否指定完整的 DOCTYPE，它就會以 quirks 模式渲染一個頁面。因此以如下代碼開始的 XHTML 頁面會被 IE 6 渲染為 quirks 模式：

在一定程度上，上述代碼是有用的，然而它**僅僅**會對 IE 6 觸發怪異模式。

如果 DOCTYPE 之前有任何語句，quirks 模式在任何版本的 IE 中（截至 IE 9）同樣會被觸發。例如，如果一個超文本文件在 DOCTYPE 前包含一個注釋或者任何標籤，IE（截至 9）會使用 quirks 模式：

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。

### 模式驗證

在絕大多數瀏覽器，文檔對象模型的擴展 `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 （頁面存檔備份，存於網際網路檔案館）