怪異模式
| HTML |
|---|
| 比較 |
怪異模式（英語：quirks mode）是指在計算機領域中，一些網頁瀏覽器為了維持對較舊的網頁設計的向後兼容性，而使用的一種技術，有別於嚴格遵循萬維網聯盟（W3C）與互聯網工程任務組（IETF）標準而設計的「標準模式」。
概述
一個網頁的結構與外觀由兩種標準化的語言的組合所描述：HTML，一種設計用於網頁的置標語言，描述頁面的結構與內容，和CSS，一種廣義的樣式表語言，用以指定頁面在不同媒介中（屏幕顯示器的視覺樣式，打印頁面時的打印樣式，頁面被屏幕閱讀器所閱讀時的聽覺樣式等）該如何被渲染。然而，多數舊的網頁瀏覽器沒有完全實施這些語言的定義或者在這些定義完成之前就已被開發（比如，Macintosh平台上的Microsoft Internet Explorer版本5.0發行於2000年，在主流網頁瀏覽器中最早完全支持CSS Level 1）[1]。結果是，很多更早的網頁依賴於早期瀏覽器不完全或不正確的解析而構造，並且只有在被這樣的瀏覽器處理時才會如設想之中那樣渲染。
主流瀏覽器對標準化的HTML和CSS的支持已得到了顯著的提高，但是舊版的文檔中的很大一部分依賴於舊版瀏覽器的quirks，對瀏覽器開發者形成了一個障礙，他們想提高它們對標準化的HTML及CSS的支持，卻同樣想對早期的非標準化頁面保持向後兼容。此外，很多新的網頁繼續以舊的方式被建造出來，由於瀏覽器開發者所引進的兼容性解決方案意味着對標準化方法的理解並不是嚴格必要的。
為了與可能數量眾多的網頁維持兼容，現代的網頁瀏覽器一般具有多種渲染模式：在「標準模式」（standards mode）頁面按照HTML與CSS的定義渲染，而在「quirks模式」中則嘗試模擬更舊的瀏覽器的行為。一些瀏覽器（例如，那些基於Mozilla的Gecko渲染引擎的，或者Internet Explorer 8在strict mode下）也使用一種嘗試於這兩者之間妥協的「近乎標準」（almost standards）模式，實施了一種表單元格尺寸的怪異行為，除此之外符合標準定義。[2]
模式之間的差異和示例
在quirks模式和標準模式之間一個突出的不同是對CSS IE盒模型缺陷的處理。在第6版之前，Internet Explorer曾經使用一種決定一個元素的盒模型的寬度和高度的，與CSS規範所指定相衝突的算法，而且由於Internet Explorer的流行，很多依賴於這種不正確的算法的網頁被創建。而在版本6, Internet Explorer在標準模式下渲染時使用了CSS規範的算法，而在quirks模式下使用先前的，不規範的算法。
另一個值得一提的不同點是某些行內（inline）元素的垂直對齊；很多早期的瀏覽器對齊圖片至包含它們的盒子的下邊框，雖然CSS的規範要求它們被對齊至盒內文本的基線。標準模式下，基於Gecko的瀏覽器將會對齊至基線，而在quirks模式下它們會對齊至底部。[3]
此外，很多早期的瀏覽器對表格內部的字體樣式不實施繼承；結果是，字體樣式必須為整個文檔作為一個整體指定一次，並且為表格再次指定一次，儘管CSS規範要求字體樣式被繼承進表格。如果字號使用相對單位指定，一個標準兼容的瀏覽器會繼承基準字號，然後應用於表格內的相對字號：比如，一個聲明了基準字號為80%的頁面內聲明表格為80%（以保證在不正確繼承字號的瀏覽器中有80%的字號）的字號將會，在一個標準兼容的瀏覽器里，顯示具有64%字號的表格。結果是，瀏覽器在怪異模式典型的不對表格繼承字號。.[4]
接近標準模式
根據CSS2的規範維持了「傳統的」表單元格的垂直方向大小調整的叫做「接近標準模式」（almost standards mode）或者「嚴格模式」（strict mode）的第三種兼容性模式，已被在這些瀏覽器中實施：Safari, Opera 7.5（和以上），所有基於Gecko（自1.0.1）的瀏覽器（比如Firefox）和Internet Explorer 8。[2]
「接近標準」模式的渲染和「標準」模式除了一點之外，在所有細節上相匹配。表單元格內部圖片的佈局採用和「quirks」模式相同的方式被處理，而不是按照標準，這點和例如Internet Explorer 7（以及更早）的舊有瀏覽器相當一致。這意味着使用表格內圖像片的佈局在「quirks」或「接近標準」模式下的瀏覽器中，比起「標準」模式下，更不至於分崩離析。[5]
觸發不同渲染模式
通常，瀏覽器基於頁面中文件類型描述的存在以決定採用哪種渲染模式；如果存在一個完整的DOCTYPE則瀏覽器將會採用標準模式，而如果它缺失則瀏覽器將會採用怪異模式。例如，一個以如下DOCTYPE開始的網頁將會觸發標準模式：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
如下DOCTYPE語法上是無效的，因為它包含公共標識符關鍵字PUBLIC卻沒有公共標識符（指示所用HTML版本的名稱），也沒有HTML文檔類型定義的系統標識符URL。這將會觸發怪異模式：
<!DOCTYPE html PUBLIC>
此外，一個不含任何DOCTYPE的網頁將會以quirks模式渲染。
對此一個值得一提的例外是微軟的Internet Explorer 6瀏覽器，如果DOCTYPE之前有一個XML聲明，不管是否指定完整的DOCTYPE，它就會以quirks模式渲染一個頁面。因此以如下代碼開始的XHTML頁面會被IE 6渲染為quirks模式：
<?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模式：
<!-- 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聲明只是簡單的被忽略。[6]然而，為對現存和更早的網頁瀏覽器的最大程度的兼容，萬維網聯盟，維持XML規範的組織，建議XHTML文件的作者可以考慮省略XML聲明。[7]
文檔類型的比較
 | 此條目需要更新。 (2013年12月24日) |
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。[2]
| Doctype | NS6 | Mozilla 0.9.5-1.0 | IE 8+ Firefox Chrome Safari Opera 7.5+ Netscape 7+ Mozilla 1.0.1+ Konq 3.5+ HTML5 spec |
IE 7 Opera 7.10 |
IE 6 Opera 7.0 |
Mac IE 5 | Konq 3.2 | |||
|---|---|---|---|---|---|---|---|---|---|---|
| 無 | Q | Q | Q | Q | Q | Q | Q | |||
| HTML 3.2 | ||||||||||
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> | Q | Q | Q | Q | Q | Q | Q | |||
| HTML 4.01 | ||||||||||
| 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 | |||
| HTML5 | ||||||||||
| <!DOCTYPE html> | Q | S | S | A | A | A | ? | |||
| XHTML Basic | ||||||||||
| 有系統標識符且無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 | |||
| XHTML 1.0 | ||||||||||
| 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 | ? | |||
| XHTML 1.1 | ||||||||||
| 有系統標識符和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+ Firefox Chrome Safari Opera 7.5+ Netscape 7+ Mozilla 1.0.1+ Konq 3.5+ HTML5 spec |
IE 7 Opera 7.10 |
IE 6 Opera 7.0 |
Mac IE 5 | Konq 3.2 | |||
模式驗證
在絕大多數瀏覽器，文檔對象模型的擴展document.compatMode指示當前頁面的渲染模式。在標準模式和接近標準模式，document.compatMode包含值CSS1Compat，然而在怪異模式該值為BackCompat。[8]
此外，在Mozilla Firefox和Opera一個給定頁面的渲染模式也被指示在「頁面信息」的信息框中。而在Internet Explorer 8及更高版本的IE中，文檔模式被顯示於Internet Explorer開發人員工具中，且可以被用戶更改。[9]在Internet Explorer中還有document.documentMode的私有JavaScript擴展，其取值為5, 7, 8, 9, 10之一的浮點型變量。[10][11]
參考文獻
- ^ Cascading Style Sheets: CSS Browsers. 19 December 2001 [27 May 2007]. （原始內容存檔於2018-07-06）.
- ^ 2.0 2.1 2.2 Sivonen, Henri. Activating Browser Modes with Doctype. [15 March 2011]. （原始內容存檔於2011-03-14）.
- ^ Images, Tables, and Mysterious Gaps. Mozilla Developer Center. [27 May 2007]. （原始內容存檔於2017-05-22）.
- ^ Fixing Table Inheritance in Quirks Mode. Mozilla Developer Center. [27 May 2007]. （原始內容存檔於2016-03-03）.
- ^ Gecko's "Almost Standards" Mode. Mozilla Developer Center. [27 May 2007]. （原始內容存檔於2007-07-13）.
- ^ Wilson, Chris. The <?xml> prolog, strict mode, and XHTML in IE. 15 August 2005 [27 May 2007]. （原始內容存檔於2010-01-18）.
- ^ HTML Compatibility Guidelines. XHTML 1.0 The Extensible HyperText Markup Language (Second Edition). World Wide Web Consortium. 1 August 2002 [14 February 2009]. （原始內容存檔於2021-03-20）.
- ^ Koch, Peter-Paul. Miscellaneous. W3C DOM Compatibility - HTML. QuirksMode. 2 February 2009 [14 February 2009]. （原始內容存檔於2014-08-27）.
- ^ IE9’s Document Modes and JavaScript （頁面存檔備份，存於互聯網檔案館） - IEBlog - Site Home - MSDN Blogs
- ^ documentMode property. [2012-04-06]. （原始內容存檔於2015-01-18）.
- ^ HTML DOM Document documentMode Property （頁面存檔備份，存於互聯網檔案館）, W3Schools
外部連結
- 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 （頁面存檔備份，存於互聯網檔案館）