坑爹的IE quirk模式【轉】

時間 2020-05-29

標籤坑爹 quirk 模式简体版

原文原文鏈接

調試一個頁面，ie下面頁面css樣式非常奇怪，各類失效。找了半天緣由不知道怎麼回事。最後在調試工具中發現，文檔模式爲quirk，改爲別的(IE 7|8|9)正常。javascript

爲何會自動選擇此文檔模式呢？css

先看看什麼是quirk模式，引用一段：http://www.microsoft.com/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx?mfr=truehtml

爲 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的區別。java

盒模型的高寬包含內補丁和邊框

在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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。