Quirks Mode中發生了什麼？

Quirks Mode是一種瀏覽器（像IE，Firefox，Opera）操作模式。從根本上說，怪異模式（也稱之為相容模式）意味著一個相對新的瀏覽器故意模擬許多在舊瀏覽器中存在的bug，特別是在IE4和IE5中。

Quirks Mode是由文件型別探查法觸發。也就是大家熟知的文件型別切換。這意味著瀏覽器檢查一個HTML文件的開始，看它是否包含一個HTML規範所要求的文件型別宣告。

Quirks Mode的目標是使舊頁面顯示出他們的作者想要的那樣。舊頁面可能利用舊瀏覽器已知的特性寫成，或者至少是適應舊瀏覽器。更多關於怪異模式的資訊請訪問QuirksMode.Org

Quirks Mode是什麼沒有權威的規範。畢竟，實質上Quirk Mode是一個故意違反CSS和HTML的規範。然而，因為作者們可能需要一個在Quirk Mode中實際上會發生什麼的描述，所以我撰寫了這個文件。

如果你有一個已經存在的頁面，它看起來有效但是在開頭缺乏一個文件型別宣告（由HTML規範所要求）。但是你可能並不需要在開頭簡單地放置一個宣告。原因是宣告會使瀏覽器工作在一個和Quirks Mode相反的所謂的標準模式下。這可能意味著忽略其它所有東西。當你加了一個文件型別宣告之後我會看到一個頁面的所有內容消失了。更經常的，佈局會以一種意料之外的方式改變。然而，如果你知道在Quirks Mode

在加一個文件型別宣告之前，你應該使用驗證器和檢查器（validators and checkers）檢查HTML和CSS程式碼的語法正確性。這可能還不夠，因為頁面仍然可能依靠一些在Quirks Mode下有效的東西寫成。因此，你應該至少在IE7和Firefox2的標準模式下測試頁面，例如，在加了一個文件型別宣告之後，如果頁面失效，下面列出的清單可能會對發現問題有用。

當建立一個新頁面的時候，你不需要知道Quirks Mode，不需要經常想它。簡單地根據HTML和CSS規範來寫就行；這包括使用一個文件型別宣告使較新的瀏覽器工作中標準模式下。再者，把文件型別宣告放置在每個頁面開頭。因為如果有一些東西（甚至一條註釋）在它前面，一些瀏覽器就會進入Quirks Mode

在Quirks Mode下，瀏覽器已經遵守工作在下面的方式下，儘管並不是所有瀏覽器顯示出以下所有特性：

lbox model是不正確的（與CSS規範有差異，儘管可能直觀上更自然）。這意味著寬度和高度屬性指定box元素包括padding和border的尺寸，不僅僅是元素的內容。（文件後面會給出一個demo。）

l非置換內聯元素的尺寸（比如，預設的span元素）受寬度和高度屬性的影響。（在CSS規範中，它們會被忽略）。

l元素的百分比高度（比如，HTML中的<table height="100%">或者CSS中的 table { height:100% }）是可行的，使用有效的高度作為引用，甚至當封閉快有自動的高度（預設的）。在標準模式下，高度取決於內容的要求；但是當封閉快設定了一個自己特定的高度值，百分比高度是有效的。

l溢位被當做擴充套件box來對待。當一個元素的內容不適合指定的尺寸（明確的或隱藏的），那麼溢位：可見的（預設）意味著當box尺寸作為指定，內容溢位。在Quirks Mode下，尺寸改變；這可以簡單地看一個例子，如果box有一個背景顏色或一個border。

l在Quirks Mode下，IE中根元素是body元素。根據規範，它是一個html元素。例如，在Quirks Mode下，為body設定一個margin是無效的。另一個例子，預設情況下，IE有一個垂直滾動條，儘管當沒有東西可以滾動的時候，它是非活動狀態（遲鈍狀態），在Quirks Mode下，你可以通過設定body { overflow: auto;}刪除它（當不需要它的時候），但是在標準模式下，你仍然需要增加html { overflow: auto;}。

l當在CSS中設定一個img元素或者input type="image"元素的時候，影象元素的padding屬性會被忽略。

l預設的浮動圖片的水平margin是3畫素（而不是0）。也就是說，如果img元素有align="left" 或者align="right"屬性或者在CSS中有float: left 或者float: right應用與img元素，瀏覽器會認為就像img元素有hspace="3"屬性（或者他的margin-left 和 margin-right屬性值為3）。這是IE中的應用。在其它瀏覽器中，Quirks Mode可能會在圖片的一邊引起額外的margin，它的寬度是2畫素而不是3畫素。

l圖片的垂直對齊方式在某些特定情況下是在封閉快的底部，而不是文字的底線。當圖片是元素中的唯一內容時就是這種情況，典型的是table的單元格。這意味著，比如，在Quirks Mode下，table單元格中的圖片預設是在單元格底部（這經常是作者想要的），然而在標準模式下，在圖片底部會有幾畫素的空間（除非有一種設定，比如，為img元素設定vertical-align: bottom）。

l在CSS中，使用margin: 0 auto使一個塊居中是無效的。注意：在IE（甚至IE7）中，為div在HTML中設定align="center"或者在CSS中設定text-align: center在塊元素作為一個整體內部會不正確地居中，甚至在“標準模式”下。

l字型屬性不會從body或其他封閉元素繼承到table中。特別是font-size。字型，顏色，行高也都有可能。比如，如果你設定body { font-family: Arial }，很有可能在table單元格中，字型屬性仍然是瀏覽器預設。

l在table單元格中字型大小的設定，一個百分比值被解釋為相對於瀏覽器基本字型大小，而不是相對於封閉元素中（表單行）被CSS設定的字型大小。

l字型大小關鍵字被不正確的解釋，因此medium是比瀏覽器基本字型稍大，small和基本字型相等。類似的，整個比例關鍵字，xx-small, x-small, small, large, x-large, xx-large被逐個錯誤解釋：每一個值被解釋為比它本來大了一級。

l畸形的屬性值經常在猜測的基礎上被解釋。比如，margin: 10 作為 margin: 10px，color: ffffff 作為 color: #ffffff。在CSS中，這些違規的命令錯誤處理規則：語法上的錯誤應該被忽略。

l在CSS中，字母大小寫在類和標示符選擇器中被認為是不重要的。因此，使用選擇器.Foo匹配一個 or style="margin: 0cm 0cm 0pt 52.5pt; vertical-align: baseline; text-indent: -31.5pt; mso-list: l0 level1 lfo1; ">l畸形的名字在類和標示符選擇器中是被接受的。特別的，以一段或者一個數字元開始的名字（比如，在選擇器中.123a and #42）是被接受的。

l宣告white-space：pre會被忽略。

l固定位置不被支援：宣告position: fixed被當做position: static（在IE7中）。

l很多CSS中增加的支援（比如max-width屬性和屬性選擇器）在IE7中，在Quirks Mode下不被使用。也就是說，有很多CSS中的特性在IE6中不被支援，在IE7中被支援，但僅僅是在標準模式下。檢視微軟部落格請進入Details on our CSS changes for IE7。

l標籤雜燴解析。比如，如果一個文件包含標記<p>text<table>...</table>，Firefox中，在Quirks Mode下認為p元素包含table元素。在標準模式下，table的開始標籤隱式地關閉了那個開啟的p元素。不同之處在於，比如，你在p元素中設定了一個border。類似的，比如，Firefox接受在font中的ul。IE在這些情況中經常工作在錯誤的規則下，甚至在標準模式下，但是標準的一致性可以使用有效的標記來獲得，經常使用明確的結束標籤，像</p>，甚至當他們是正規的操作。

l元素間的空白是重要的。比如，你有一個連結單。典型的你可以在表單項之間分行寫li元素標記。（也就是說，在</li> 和 <li>標籤之間）：

<ul> <li><a ...>...</a></li> <li><a ...>...</a></li> ... </ul>

然而，如果你設定display: block和為連結元素設定一個border，你可能會以項之間的垂直間隙作為結束。這會在IE7中Quirks Mode下發生，並且經常在之前版本的IE中發生。另一方面，在IE中Quirks Mode下，在以上標記中，如果你為li元素設定display: inline，那麼在項之間就不會有空白。在標準模式下，在其它瀏覽器中，會有相對一個空白的空白。這被一些瀏覽器認為是標準一致性。

l在Mozilla Firefox中，表單有一個預設的1em的bottom margin。（在IE中，兩種模式下都有一個這樣的margin。）這很顯然是繼承web瀏覽器的傳統，在一個表單下面留下很多空間。怎樣除掉一個表單下方的空白線過去是經常被問到的一個問題。

l垂直margin在某些環境中是被禁止的，比如，當一個p元素作為首元素出現在一個td元素中。這或多或少是傳統的行為，在IE7兩種模式下，他被取代了。（在IE8中，只有在Quirks Mode下被取代）。

lWbr標記作為換行是很好的。瀏覽器很廣泛的支援它。但是IE8中"標準模式"下缺不這樣做了。這是壞訊息，因為<wbr>標籤一直是網頁上其它非間斷字串中唯一有效的暗示換行方式。

lMozilla瀏覽器（像Firefox和Seamonkey）有一些附加的特性，在quirk.css歸檔。比如，table border的預設顏色是gray（在大多數瀏覽器中），在標準模式下使用與table前景色相反的顏色。在這些問題中，Quirks Mode確實是一個不同的相容性模式。注意：在那個文件中，不是所有的設定都可以應用於所有版本的Mozilla。

所列的這個單子很可能是不全面的。這主要是與IE7相關。其它瀏覽器可能有模仿舊版本IE的與之程度差不多的Quirks Mode。

可以這樣解釋，在Quirks Mode下，width屬性被（錯誤地）當做指定整個元素塊的寬度，在這個例子中是8em。在標準模式下，它指定元素中內容的寬度，所以整個box的寬度為12em（加上邊的寬度）。也就是說，總寬度包含左邊和右邊的空白，每個是2em。

在Firefox下，box模型在兩種模式下可以正確應用。然而，你仍然可以在IE中Quirks Mode下，使用CSS命令或者在Web Developer Extention（它是一個在與CSS相關案例中很好用的工具）中使用Border Box模型模仿不正確的box模型。