HTML文檔類(lèi)型DTD與瀏覽器怪異模式的示例分析

這篇文章主要為大家展示了“HTML文檔類(lèi)型DTD與瀏覽器怪異模式的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“HTML文檔類(lèi)型DTD與瀏覽器怪異模式的示例分析”這篇文章吧。

瀏覽器從服務(wù)端獲取網(wǎng)頁(yè)后會(huì)根據(jù)文檔的DOCTYPE定義顯示網(wǎng)頁(yè)，如果文檔正確定義了DOCTYPE瀏覽器則會(huì)進(jìn)入標(biāo)準(zhǔn)模式（Standards Mode），否則瀏覽器會(huì)進(jìn)入怪異模式或混雜模式（Quirks mode）。

瀏覽器開(kāi)發(fā)初期W3C倡導(dǎo)的網(wǎng)頁(yè)標(biāo)準(zhǔn)并不流行，因此瀏覽器有獨(dú)特的對(duì)網(wǎng)頁(yè)標(biāo)簽或?qū)傩缘慕馕瞿Ｊ剑S著日后網(wǎng)頁(yè)標(biāo)準(zhǔn)的流行，瀏覽器增加了對(duì)新標(biāo)準(zhǔn)的支持（Standards Mode），但又沒(méi)有放棄對(duì)原有模式的兼容（Quirks mode），這就是瀏覽器多種表現(xiàn)模式的來(lái)源。

當(dāng)微軟開(kāi)始開(kāi)發(fā)與標(biāo)準(zhǔn)兼容的瀏覽器時(shí)，他們希望確保向后兼容性。為了實(shí)現(xiàn)這一點(diǎn)，他們IE6.0以后的版本在瀏覽器內(nèi)嵌了兩種表現(xiàn)模式： Standards Mode（標(biāo)準(zhǔn)模式或Strict Mode）和Quirks mode（怪異模式或兼容模式Compatibility Mode）。在標(biāo)準(zhǔn)模式中，瀏覽器根據(jù)W3C所定的規(guī)范來(lái)顯示頁(yè)面；而在怪異模式中，頁(yè)面將以IE5，甚至IE4的顯示頁(yè)面的方式來(lái)表現(xiàn)，以保持以前的網(wǎng)頁(yè)能正常顯示。

對(duì)于這兩種模式引起最大的問(wèn)題就是盒模式的問(wèn)題，或者現(xiàn)在大家已經(jīng)忽視了IE5的存在，但是，IE在怪異模式運(yùn)行的盒模式依然在最新版本的IE保留著，甚至在IE6—IE10都保留有多種模式供開(kāi)發(fā)者使用。其實(shí)為了與可能數(shù)量眾多的網(wǎng)頁(yè)維持兼容，現(xiàn)代的網(wǎng)頁(yè)瀏覽器一般都具有多種渲染模式：在“標(biāo)準(zhǔn)模式”(standards mode) 頁(yè)面按照 HTML 與 CSS 的定義渲染，而在“quirks 模式”中則嘗試模擬更舊的瀏覽器的行為。一些瀏覽器（例如，那些基于Mozilla 的 Gecko 渲染引擎的，或者 Internet Explorer 8 在 strict mode 下）也使用一種嘗試于這兩者之間妥協(xié)的“近乎標(biāo)準(zhǔn)”(almoststandards) 模式，實(shí)施了一種表單元格尺寸的怪異行為，除此之外符合W3C標(biāo)準(zhǔn)定義。

IE盒模型缺陷

（InternetExplorer box model bug）是指早期版本的IE調(diào)整網(wǎng)頁(yè)元素大小的方法，和W3C為層疊樣式表（CSS）語(yǔ)言推薦的標(biāo)準(zhǔn)方式不同。在IE6中，瀏覽器支持一種解決了這種差異的可選的渲染模式（叫做“遵從標(biāo)準(zhǔn)模式”）。然而，出于向后兼容的原因，所有版本的IE (截至 IE 9 及 IE 10 Developer Preview) 仍然默認(rèn)表現(xiàn)為通常的，非標(biāo)準(zhǔn)的模式。Internet Explorerfor Mac不受這種非標(biāo)準(zhǔn)行為影響。此外，Internet Explorer 10 于其 Consumer Preview 之中也改變其默認(rèn)怪異模式為一種更加符合規(guī)范的類(lèi)似于非 IE 瀏覽器的怪異模式。

模式之間的差異和示例

Quirks和Standards的區(qū)別大部分都可以歸為IE5和IE6的區(qū)別。

在 Quirks 模式和標(biāo)準(zhǔn)模式之間一個(gè)突出的不同是對(duì) CSS IE盒模型缺陷的處理。在第 6 版之前，InternetExplorer 曾經(jīng)使用一種決定一個(gè)元素的盒模型的寬度和高度的，與 CSS 規(guī)范所指定相沖突的算法，而且由于 Internet Explorer 的流行，很多依賴(lài)于這種不正確的算法的網(wǎng)頁(yè)被創(chuàng)建。而在版本 6, Internet Explorer 在標(biāo)準(zhǔn)模式下渲染時(shí)使用了CSS規(guī)范的算法，而在quirks模式下使用先前不規(guī)范的算法。

另一個(gè)值得一提的不同點(diǎn)是某些行內(nèi) (inline) 元素的垂直對(duì)齊；很多早期的瀏覽器對(duì)齊圖片至包含它們的盒子的下邊框，雖然 CSS 的規(guī)范要求它們被對(duì)齊至盒內(nèi)文本的基線(xiàn)。標(biāo)準(zhǔn)模式下，基于 Gecko 的瀏覽器將會(huì)對(duì)齊至基線(xiàn)，而在 quirks 模式下它們會(huì)對(duì)齊至底部。

此外，很多早期的瀏覽器對(duì)表格內(nèi)部的字體樣式不實(shí)施繼承；結(jié)果是，字體樣式必須為整個(gè)文檔作為一個(gè)整體指定一次，并且為表格再次指定一次，盡管 CSS 規(guī)范要求字體樣式被繼承進(jìn)表格。如果字號(hào)使用相對(duì)單位指定，一個(gè)標(biāo)準(zhǔn)兼容的瀏覽器會(huì)繼承基準(zhǔn)字號(hào)，然后應(yīng)用于表格內(nèi)的相對(duì)字號(hào)：比如，一個(gè)聲明了基準(zhǔn)字號(hào)為 80% 的頁(yè)面內(nèi)聲明表格為 80% （以保證在不正確繼承字號(hào)的瀏覽器中有 80% 的字號(hào)）的字號(hào)將會(huì)，在一個(gè)標(biāo)準(zhǔn)兼容的瀏覽器里，顯示具有 64% 字號(hào)的表格。結(jié)果是，瀏覽器在怪異模式典型的不對(duì)表格繼承字號(hào)。.

IE6 IE7 在怪異模式下盒模型是一模一樣的  即width=width
IE6 IE7 在標(biāo)準(zhǔn)模式下 盒模型也是一模一樣的即width=width+padding+border

代碼實(shí)例http://bbs.blueidea.com/thread-2839403-1-1.html

在strict mode中 ：

width是內(nèi)容寬度，也就是說(shuō),元素真正的寬度 = margin-left + border-left-width + padding-left + width +padding-right + border-right-width + margin-right;

在quirks mode中 ：

width則是元素的實(shí)際寬度，內(nèi)容寬度 = width - (margin-left +margin-right + padding-left + padding-right + border-left-width +border-right-width)

怪異模式CSS上區(qū)別《Quirks mode and strict mode》

javascript上的區(qū)別

以下是一些重要的不同點(diǎn)：

1）盒模型的高寬包含內(nèi)邊距padding和邊框border

    在W3C標(biāo)準(zhǔn)中，如果設(shè)置一個(gè)元素的寬度和高度，指的是元素內(nèi)容的寬度和高度，而在IE5.5及以下的瀏覽器及其他版本的Quirks模式下，IE的寬度和高度還包含了padding和border。

2）可以設(shè)置行內(nèi)元素的高寬

    在Standards模式下，給span等行內(nèi)元素設(shè)置wdith和height都不會(huì)生效，而在quirks模式下，則會(huì)生效。

3）可設(shè)置百分比的高度

    在standards模式下，一個(gè)元素的高度是由其包含的內(nèi)容來(lái)決定的，如果父元素沒(méi)有設(shè)置高度，子元素設(shè)置一個(gè)百分比的高度是無(wú)效的。

4）用margin:0 auto設(shè)置水平居中在IE下會(huì)失效

    使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會(huì)失效,quirk模式下的解決辦法，用text-align屬性:

   body{text-align:center};#content{text-align:left}

5）quirk模式下設(shè)置圖片的padding會(huì)失效

6）quirk模式下Table中的字體屬性不能繼承上層的設(shè)置

7）quirk模式下white-space:pre會(huì)失效

接近標(biāo)準(zhǔn)模式

根據(jù) CSS2 的規(guī)范維持了“傳統(tǒng)的”表單元格的垂直方向大小調(diào)整的叫做“接近標(biāo)準(zhǔn)模式”(almoststandards mode) 或者“嚴(yán)格模式”(strictmode) 的第三種兼容性模式，已被在這些瀏覽器中實(shí)施：Safari, Opera 7.5 (和以上), 所有基于 Gecko (自 1.0.1) 的瀏覽器（比如 Firefox）和 Internet Explorer 8。

“接近標(biāo)準(zhǔn)”模式的渲染和“標(biāo)準(zhǔn)”模式除了一點(diǎn)之外，在所有細(xì)節(jié)上相匹配。表單元格內(nèi)部圖片的布局采用和“quirks”模式相同的方式被處理，而不是按照標(biāo)準(zhǔn)，這點(diǎn)和例如 Internet Explorer 7 （以及更早）的舊版 (en) 瀏覽器相當(dāng)一致。這意味著使用表格內(nèi)圖像片的布局在“quirks”或“接近標(biāo)準(zhǔn)”模式下的瀏覽器中，比起“標(biāo)準(zhǔn)”模式下，更不至于分崩離析。

觸發(fā)不同渲染模式

DOCTYPE，簡(jiǎn)稱(chēng)為DTD，是英文DocumentType Definition的縮寫(xiě)，中文“文檔類(lèi)型”

DOCTYPE標(biāo)簽是單獨(dú)出現(xiàn)的

說(shuō)明：

    文檔類(lèi)型，會(huì)使瀏覽器使用相應(yīng)標(biāo)準(zhǔn)加載網(wǎng)頁(yè)并顯示

    文檔類(lèi)型定義在HTML文檔的第一行，在html標(biāo)簽之前

文檔不定義DOCTYPE，瀏覽器將無(wú)法獲知HTML或XHTML文檔的類(lèi)型，因此會(huì)進(jìn)入混亂模式。

通常，瀏覽器基于頁(yè)面中文件類(lèi)型描述DTD的存在以決定采用哪種渲染模式；如果存在一個(gè)完整的 DOCTYPE 則瀏覽器將會(huì)采用標(biāo)準(zhǔn)模式，而如果它缺失則瀏覽器將會(huì)采用怪異模式。例如，一個(gè)以如下 DOCTYPE 開(kāi)始的網(wǎng)頁(yè)將會(huì)觸發(fā)標(biāo)準(zhǔn)模式：

<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

如下 DOCTYPE 語(yǔ)法上是無(wú)效的，因?yàn)樗矘?biāo)識(shí)符關(guān)鍵字 PUBLIC 卻沒(méi)有公共標(biāo)識(shí)符（指示所用 HTML 版本的名稱(chēng)），也沒(méi)有 HTML 文檔類(lèi)型定義的系統(tǒng)標(biāo)識(shí)符 URL。這將會(huì)觸發(fā)怪異模式：

<!DOCTYPE html PUBLIC>

此外，一個(gè)不含任何DOCTYPE 的網(wǎng)頁(yè)將會(huì)以 quirks 模式渲染。

對(duì)此一個(gè)值得一提的例外是微軟的 Internet Explorer 6 瀏覽器，如果 DOCTYPE 之前有一個(gè) XML 聲明，不管是否指定完整的DOCTYPE，它就會(huì)以 quirks 模式渲染一個(gè)頁(yè)面。因此以如下代碼開(kāi)始的 XHTML 頁(yè)面會(huì)被 IE 6 渲染為 quirks 模式：

<?xml version="1.0"encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

在一定程度上，上述代碼是有用的，然而它僅僅會(huì)對(duì) IE 6 觸發(fā)怪異模式。

如果 DOCTYPE 之前有任何語(yǔ)句，quirks 模式在任何版本的 IE 中（截至 IE 9）同樣會(huì)被觸發(fā)。例如，如果一個(gè)超文本文件在 DOCTYPE 前包含一個(gè)注釋或者任何標(biāo)簽，IE (截至 9) 會(huì)使用 quirks 模式：

<!-- This comment will put IE 6, 7, 8,and 9 in quirks mode -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

XML 聲明的問(wèn)題在Internet Explorer 7 中被解決了，在此 XML 聲明只是簡(jiǎn)單的被忽略。然而，為對(duì)現(xiàn)存和更早的網(wǎng)頁(yè)瀏覽器的最大程度的兼容，萬(wàn)維網(wǎng)聯(lián)盟，維持 XML 規(guī)范的組織，建議 XHTML文件的作者可以考慮省略XML 聲明。

JavaScript中的區(qū)別

Quirks mode的Table of measurements 

點(diǎn)擊打開(kāi)鏈接

MSDN

DOM中的document有一個(gè)屬性叫compatMode，其返回值是BackCompat和CSS1Compat，分別對(duì)應(yīng)quirks mode和strict mode。

function detectMode(){

varmode=document.compatMode;

if(mode="BackCompat")

alert("當(dāng)前以quirks mode的方式渲染頁(yè)面");

elseif(mode="CSS1Compat")

alert("當(dāng)前已strict mode的方式渲染頁(yè)面");

elsealert("瀏覽器版本不支持compatMode");

}

IE8以前的版本compatMode只取決于DocType，IE8+不建議使用compatMode判斷，而建議使用documentMode，http://msdn.microsoft.com/en-US/library/cc196988.aspx

常用的瀏覽器表現(xiàn)模式

IE

IE包括兩種模式：標(biāo)準(zhǔn)模式（Standards Mode）與怪異模式或混雜模式（Quirks mode）。

簡(jiǎn)稱(chēng)為IE(S)與IE(Q)

FireFox

FIreFox包括三種模式：Full Standards Mode、Almost Standards Mode與Quirks Mode。對(duì)這三種模式的描述見(jiàn)：Mozilla's DOCTYPE sniffing

Opera

Opera包括三種模式：Quirks、Standards與Almost Standards。對(duì)這三種模式的描述見(jiàn)：DOCTYPE Switches supportin Opera

當(dāng)沒(méi)有使用DTD聲明或者使用HTML4以下（不包括HTML4）的DTD聲明時(shí)，基本所有的瀏覽器都是使用Quirks Mode呈現(xiàn)。

文檔類(lèi)型的比較

Henri Sivonen 編譯了一個(gè)不同文檔類(lèi)型以及在最常見(jiàn)的瀏覽器中它們被如何對(duì)待的清單，展示了這些情況下，頁(yè)面是否被渲染為怪異 (Q)，標(biāo)準(zhǔn) (S) 或接近標(biāo)準(zhǔn) (A) 模式。接近標(biāo)準(zhǔn)模式的判定標(biāo)準(zhǔn)是非標(biāo)準(zhǔn)的表單元格高度的渲染。這個(gè)表格應(yīng)用于Content-Type 為 text/html 的內(nèi)容。Content-Type 為 application/xhtml+xml 的內(nèi)容在 Chrome, Firefox, InternetExplorer 9 (以及 10), Safari和 Opera 被渲染為標(biāo)準(zhǔn)模式。Internet Explorer 6, 7 和 8 不支持 application/xhtml+xml 的 Content-Type。

模式驗(yàn)證

在絕大多數(shù)瀏覽器，文檔對(duì)象模型的擴(kuò)展 document.compatMode 指示當(dāng)前頁(yè)面的渲染模式。在標(biāo)準(zhǔn)模式和接近標(biāo)準(zhǔn)模式，document.compatMode 包含值 CSS1Compat，然而在怪異模式該值為 BackCompat。

此外，在 MozillaFirefox 和 Opera 一個(gè)給定頁(yè)面的渲染模式也被指示在“頁(yè)面信息”的信息框中。而在Internet Explorer 8 及更高版本的 IE 中，文檔模式被顯示于Internet Explorer開(kāi)發(fā)人員工具中，且可以被用戶(hù)更改。在 Internet Explorer 中還有 document.documentMode 的私有 JavaScript 擴(kuò)展，其取值為 5, 7, 8, 9, 10 之一的浮點(diǎn)型變量。

以上是“HTML文檔類(lèi)型DTD與瀏覽器怪異模式的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！