怪異模式

在電腦領域中，怪異模式（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