調試一個頁面，ie下面頁面css樣式很是奇怪，各種失效。找了半天原因不知道怎么回事。最后在調試工具中發現，文檔模式為quirk，改成別的(IE 7|8|9)正常。
為什么會自動選擇此文檔模式呢？
先看看什么是quirk模式，引用一段：http://www.microsoft.com/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx?mfr=true
為 Web頁指定 DOCTYPE 會影響瀏覽器呈現頁的方式。Internet Explorer、Mozilla Firefox 和 Opera 全都支持一種名為“DOCTYPE 切換”（也叫“DOCTYPE 嗅探”）的功能。
引入 DOCTYPE 切換的目的是使瀏覽器能夠正確地呈現符合標准的 Web 站點以及舊式 Web 站點。大多數 Web 站點被開發為呈現 HTML 頁而不是 XHTML 頁。瀏覽器通過判斷是否存在 DOCTYPE 來確定何時應該使用標准來呈現頁。
Internet Explorer 6+ 支持兩種呈現模式，分別叫做 Quirks 模式和 Standards 模式。當 Internet Explorer 呈現包含有效 XHTML（或 HTML 4.0）DOCTYPE 的頁時，它會以 Standards 模式呈現該頁；否則，它會以 Quirks模式呈現該頁（有關詳細信息，請參閱 CSS Enhancements in Internet Explorer 6）。
Opera 瀏覽器 (Opera 7+) 支持與 Internet Explorer 相同的兩種呈現模式：Quirks 和 Standards（有關詳細信息，請參閱 http://www.opera.com/docs/specs/doctype/）。
Mozilla Firefox 1+ 支持三種呈現模式：Quirks 模式、Almost Standards 模式和 Standards 模式。Firefox 的 Almost Standards 模式對應於 Internet Explorer 和 Opera 的 Standards 模式。當頁包含有效的 XHTML 1.0 Transitional DOCTYPE（並且該頁被分配為 text/html MIME 類型）時，Firefox 會以 Almost Standards 模式呈現該頁。當頁包含 XHTML 1.0 Strict 或 XHTML 1.1 DOCTYPE（或者該頁被分配為 XML MIME 類型）時，該頁將以 Standards 模式呈現（有關詳細信息，請參閱 http://www.mozilla.org/docs/web-developer/quirks/doctypes.html）。
可以通過臨時向頁中添加以下客戶端腳本（該腳本在最新版本的 Internet Explorer、Firefox 和 Opera 中有效）確定瀏覽器的當前呈現模式。
<script type="text/javascript"> alert( document.compatMode ); </script>
您需要關心瀏覽器的呈現模式，因為它會影響將層疊樣式表應用於該頁的方式。如果將現有 HTML 頁轉換為 XHTML 頁，那么在瀏覽器中打開它們時，它們可能看起來非常不同。
例如，Internet Explorer 以不同方式計算頁元素的大小，這取決於呈現模式（它使用不同的 CSS Box Model）。在 Quirks 模式下，元素的寬度是通過將元素的內容、內邊距、邊框和邊距相加而計算得到的。在 Standards 模式下，元素的寬度是只考慮元素內容的寬度而計算得到的。
Quirks模式與Standards模式的區別
quirks和standards的區別很多都可以歸為IE5和IE6的區別。
- 盒模型的高寬包含內補丁和邊框
- 在W3C標准中，如果設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks模式下，IE的寬度和高度還包含了padding和border。IE5.5及以下的瀏覽器即使在Standards模式下，也會有這個問題
- 可以設置行內元素的高寬
- 在Standards模式下，給span等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效
- 可設置百分比的高度
- 在standards模式下，一個元素的高度是由其包含的內容來決定的，如果父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的
- 用margin:0 auto設置水平居中在IE下會失效
-
使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效,quirk模式下的解決辦法，用text-align屬性:
body{text-align:center};#{content:text-align:left} - 設置圖片的padding會失效
- Table中的字體屬性不能繼承上層的設置
- white-space: pre會失效
- 許多CSS默認樣式將不同
- 在Standards模式下，給span等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效
- 這些都不用怎么去管了，以前的版本誰在意呢。如何避免默認quirk模式呢，一是設置doctype，二是doctype前不允許有任何字符（空字符除外），因為一旦發現有字符在文檔首瀏覽器將會輸出其在body並將字符與<HTML>之間的標記<!***>用<!---->注釋起來，那么文檔內容將無doctype設置。
-
這里測試的僅為IE9，其他瀏覽器未知。
轉自： http://www.cnblogs.com/zaric/archive/2011/11/25/2263139.html