IE的quirk模式

先看看什麼是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
中有效)確定瀏覽器的當前呈現模式。

alert( document.compatMode );
您需要關心瀏覽器的呈現模式,因爲它會影響將層疊樣式表應用於該頁的方式。如果將現有 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並將字符與之間的標記

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章