溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“HTML文檔類型DTD與瀏覽器怪異模式的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“HTML文檔類型DTD與瀏覽器怪異模式的示例分析”這篇文章吧。
瀏覽器從服務端獲取網頁后會根據文檔的DOCTYPE定義顯示網頁，如果文檔正確定義了DOCTYPE瀏覽器則會進入標準模式（Standards Mode），否則瀏覽器會進入怪異模式或混雜模式（Quirks mode）。
瀏覽器開發初期W3C倡導的網頁標準并不流行，因此瀏覽器有獨特的對網頁標簽或屬性的解析模式，隨著日后網頁標準的流行，瀏覽器增加了對新標準的支持（Standards Mode），但又沒有放棄對原有模式的兼容（Quirks mode），這就是瀏覽器多種表現模式的來源。
當微軟開始開發與標準兼容的瀏覽器時，他們希望確保向后兼容性。為了實現這一點，他們IE6.0以后的版本在瀏覽器內嵌了兩種表現模式： Standards Mode（標準模式或Strict Mode）和Quirks mode（怪異模式或兼容模式Compatibility Mode）。在標準模式中，瀏覽器根據W3C所定的規范來顯示頁面；而在怪異模式中，頁面將以IE5，甚至IE4的顯示頁面的方式來表現，以保持以前的網頁能正常顯示。
對于這兩種模式引起最大的問題就是盒模式的問題，或者現在大家已經忽視了IE5的存在，但是，IE在怪異模式運行的盒模式依然在最新版本的IE保留著，甚至在IE6—IE10都保留有多種模式供開發者使用。其實為了與可能數量眾多的網頁維持兼容，現代的網頁瀏覽器一般都具有多種渲染模式：在“標準模式”(standards mode) 頁面按照 HTML 與 CSS 的定義渲染，而在“quirks 模式”中則嘗試模擬更舊的瀏覽器的行為。一些瀏覽器（例如，那些基于Mozilla 的 Gecko 渲染引擎的，或者 Internet Explorer 8 在 strict mode 下）也使用一種嘗試于這兩者之間妥協的“近乎標準”(almoststandards) 模式，實施了一種表單元格尺寸的怪異行為，除此之外符合W3C標準定義。
IE盒模型缺陷
（InternetExplorer box model bug）是指早期版本的IE調整網頁元素大小的方法，和W3C為層疊樣式表（CSS）語言推薦的標準方式不同。在IE6中，瀏覽器支持一種解決了這種差異的可選的渲染模式（叫做“遵從標準模式”）。然而，出于向后兼容的原因，所有版本的IE (截至 IE 9 及 IE 10 Developer Preview) 仍然默認表現為通常的，非標準的模式。Internet Explorerfor Mac不受這種非標準行為影響。此外，Internet Explorer 10 于其 Consumer Preview 之中也改變其默認怪異模式為一種更加符合規范的類似于非 IE 瀏覽器的怪異模式。
模式之間的差異和示例
Quirks和Standards的區別大部分都可以歸為IE5和IE6的區別。
在 Quirks 模式和標準模式之間一個突出的不同是對 CSS IE盒模型缺陷的處理。在第 6 版之前，InternetExplorer 曾經使用一種決定一個元素的盒模型的寬度和高度的，與 CSS 規范所指定相沖突的算法，而且由于 Internet Explorer 的流行，很多依賴于這種不正確的算法的網頁被創建。而在版本 6, Internet Explorer 在標準模式下渲染時使用了CSS規范的算法，而在quirks模式下使用先前不規范的算法。
另一個值得一提的不同點是某些行內 (inline) 元素的垂直對齊；很多早期的瀏覽器對齊圖片至包含它們的盒子的下邊框，雖然 CSS 的規范要求它們被對齊至盒內文本的基線。標準模式下，基于 Gecko 的瀏覽器將會對齊至基線，而在 quirks 模式下它們會對齊至底部。
此外，很多早期的瀏覽器對表格內部的字體樣式不實施繼承；結果是，字體樣式必須為整個文檔作為一個整體指定一次，并且為表格再次指定一次，盡管 CSS 規范要求字體樣式被繼承進表格。如果字號使用相對單位指定，一個標準兼容的瀏覽器會繼承基準字號，然后應用于表格內的相對字號：比如，一個聲明了基準字號為 80% 的頁面內聲明表格為 80% （以保證在不正確繼承字號的瀏覽器中有 80% 的字號）的字號將會，在一個標準兼容的瀏覽器里，顯示具有 64% 字號的表格。結果是，瀏覽器在怪異模式典型的不對表格繼承字號。.
IE6 IE7 在怪異模式下盒模型是一模一樣的 即width=width
IE6 IE7 在標準模式下 盒模型也是一模一樣的即width=width+padding+border
代碼實例http://bbs.blueidea.com/thread-2839403-1-1.html
在strict mode中 ：
width是內容寬度，也就是說,元素真正的寬度 = margin-left + border-left-width + padding-left + width +padding-right + border-right-width + margin-right;
在quirks mode中 ：
width則是元素的實際寬度，內容寬度 = width - (margin-left +margin-right + padding-left + padding-right + border-left-width +border-right-width)
怪異模式CSS上區別《Quirks mode and strict mode》
javascript上的區別
以下是一些重要的不同點：
1）盒模型的高寬包含內邊距padding和邊框border
在W3C標準中，如果設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在IE5.5及以下的瀏覽器及其他版本的Quirks模式下，IE的寬度和高度還包含了padding和border。
2）可以設置行內元素的高寬
在Standards模式下，給span等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。
3）可設置百分比的高度
在standards模式下，一個元素的高度是由其包含的內容來決定的，如果父元素沒有設置高度，子元素設置一個百分比的高度是無效的。
4）用margin:0 auto設置水平居中在IE下會失效
使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效,quirk模式下的解決辦法，用text-align屬性:
body{text-align:center};#content{text-align:left}
5）quirk模式下設置圖片的padding會失效
6）quirk模式下Table中的字體屬性不能繼承上層的設置
7）quirk模式下white-space:pre會失效
接近標準模式
根據 CSS2 的規范維持了“傳統的”表單元格的垂直方向大小調整的叫做“接近標準模式”(almoststandards mode) 或者“嚴格模式”(strictmode) 的第三種兼容性模式，已被在這些瀏覽器中實施：Safari, Opera 7.5 (和以上), 所有基于 Gecko (自 1.0.1) 的瀏覽器（比如 Firefox）和 Internet Explorer 8。
“接近標準”模式的渲染和“標準”模式除了一點之外，在所有細節上相匹配。表單元格內部圖片的布局采用和“quirks”模式相同的方式被處理，而不是按照標準，這點和例如 Internet Explorer 7 （以及更早）的舊版 (en) 瀏覽器相當一致。這意味著使用表格內圖像片的布局在“quirks”或“接近標準”模式下的瀏覽器中，比起“標準”模式下，更不至于分崩離析。
觸發不同渲染模式
DOCTYPE，簡稱為DTD，是英文DocumentType Definition的縮寫，中文“文檔類型”
DOCTYPE標簽是單獨出現的
說明：
文檔類型，會使瀏覽器使用相應標準加載網頁并顯示
文檔類型定義在HTML文檔的第一行，在html標簽之前
文檔不定義DOCTYPE，瀏覽器將無法獲知HTML或XHTML文檔的類型，因此會進入混亂模式。
通常，瀏覽器基于頁面中文件類型描述DTD的存在以決定采用哪種渲染模式；如果存在一個完整的 DOCTYPE 則瀏覽器將會采用標準模式，而如果它缺失則瀏覽器將會采用怪異模式。例如，一個以如下 DOCTYPE 開始的網頁將會觸發標準模式：
<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
如下 DOCTYPE 語法上是無效的，因為它包含公共標識符關鍵字 PUBLIC 卻沒有公共標識符（指示所用 HTML 版本的名稱），也沒有 HTML 文檔類型定義的系統標識符 URL。這將會觸發怪異模式：
<!DOCTYPE html PUBLIC>
此外，一個不含任何DOCTYPE 的網頁將會以 quirks 模式渲染。
對此一個值得一提的例外是微軟的 Internet Explorer 6 瀏覽器，如果 DOCTYPE 之前有一個 XML 聲明，不管是否指定完整的DOCTYPE，它就會以 quirks 模式渲染一個頁面。因此以如下代碼開始的 XHTML 頁面會被 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">
在一定程度上，上述代碼是有用的，然而它僅僅會對 IE 6 觸發怪異模式。
如果 DOCTYPE 之前有任何語句，quirks 模式在任何版本的 IE 中（截至 IE 9）同樣會被觸發。例如，如果一個超文本文件在 DOCTYPE 前包含一個注釋或者任何標簽，IE (截至 9) 會使用 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 聲明的問題在Internet Explorer 7 中被解決了，在此 XML 聲明只是簡單的被忽略。然而，為對現存和更早的網頁瀏覽器的最大程度的兼容，萬維網聯盟，維持 XML 規范的組織，建議 XHTML文件的作者可以考慮省略XML 聲明。
JavaScript中的區別
Quirks mode的Table of measurements
點擊打開鏈接
MSDN
DOM中的document有一個屬性叫compatMode，其返回值是BackCompat和CSS1Compat，分別對應quirks mode和strict mode。
function detectMode(){
varmode=document.compatMode;
if(mode="BackCompat")
alert("當前以quirks mode的方式渲染頁面");
elseif(mode="CSS1Compat")
alert("當前已strict mode的方式渲染頁面");
elsealert("瀏覽器版本不支持compatMode");
}
IE8以前的版本compatMode只取決于DocType，IE8+不建議使用compatMode判斷，而建議使用documentMode，http://msdn.microsoft.com/en-US/library/cc196988.aspx
常用的瀏覽器表現模式
IE
IE包括兩種模式：標準模式（Standards Mode）與怪異模式或混雜模式（Quirks mode）。
簡稱為IE(S)與IE(Q)
FireFox
FIreFox包括三種模式：Full Standards Mode、Almost Standards Mode與Quirks Mode。對這三種模式的描述見：Mozilla's DOCTYPE sniffing
Opera
Opera包括三種模式：Quirks、Standards與Almost Standards。對這三種模式的描述見：DOCTYPE Switches supportin Opera
當沒有使用DTD聲明或者使用HTML4以下（不包括HTML4）的DTD聲明時，基本所有的瀏覽器都是使用Quirks Mode呈現。
文檔類型的比較
Henri Sivonen 編譯了一個不同文檔類型以及在最常見的瀏覽器中它們被如何對待的清單，展示了這些情況下，頁面是否被渲染為怪異 (Q)，標準 (S) 或接近標準 (A) 模式。接近標準模式的判定標準是非標準的表單元格高度的渲染。這個表格應用于Content-Type 為 text/html 的內容。Content-Type 為 application/xhtml+xml 的內容在 Chrome, Firefox, InternetExplorer 9 (以及 10), Safari和 Opera 被渲染為標準模式。Internet Explorer 6, 7 和 8 不支持 application/xhtml+xml 的 Content-Type。
Doctype | NS6 | Mozilla0.9.5-1.0 | IE 8+ | IE 7 | IE 6 | Mac IE 5 | Konq 3.2 | |||
*** | Q | Q | Q | Q | Q | Q | Q | |||
HTML 3.2 | ||||||||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> | Q | Q | Q | Q | Q | Q | Q | |||
HTML 4.01 | ||||||||||
Strict | 有系統標識符 | {`text`} S | {`text`} S | {`text`} S | A | A | A | A | ||
無系統標識符 | {`text`} S | {`text`} S | {`text`} S | A | A | Q | A | |||
Transitional | 有系統標識符 | {`text`} S | {`text`} S | A | A | A | A | Q | ||
無系統標識符 | Q | Q | Q | Q | Q | Q | Q | |||
HTML5 | ||||||||||
<!DOCTYPE html> | Q | {`text`} S | {`text`} S | A | A | A | ? | |||
XHTML Basic | ||||||||||
有系統標識符且無 XML 聲明 | {`text`} S | {`text`} S | {`text`} S | A | A | A | A | |||
XHTML 1.0 | ||||||||||
Strict | 有系統標識符和 XML 聲明 | {`text`} S | {`text`} S | {`text`} S | A | Q | A | Q | ||
有系統標識符且無 XML 聲明 | {`text`} S | {`text`} S | {`text`} S | A | A | A | A | |||
無系統標識符，也無 XML 聲明 | {`text`} S | {`text`} S | {`text`} S | A | A | A | ? | |||
Transitional | 有系統標識符且有 XML 聲明 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | {`text`} S | {`text`} S | A | A | Q | A | Q | ||
有系統標識符，無 XML 聲明 | {`text`} S | {`text`} S | A | A | A | A | Q | |||
無系統標識符，無 XML 聲明 | {`text`} S | {`text`} S | A | A | A | A | ? | |||
XHTML 1.1 | ||||||||||
有系統標識符和 XML 聲明 | {`text`} S | {`text`} S | {`text`} S | A | Q | A | Q | |||
有系統標識符，無 XML 聲明 | {`text`} S | {`text`} S | {`text`} S | A | A | A | A | |||
Doctype | NS6 | Mozilla0.9.5-1.0 | IE 8+ | IE 7 | IE 6 | Mac IE 5 | Konq 3.2 | |||
模式驗證
在絕大多數瀏覽器，文檔對象模型的擴展 document.compatMode 指示當前頁面的渲染模式。在標準模式和接近標準模式，document.compatMode 包含值 CSS1Compat，然而在怪異模式該值為 BackCompat。
此外，在 MozillaFirefox 和 Opera 一個給定頁面的渲染模式也被指示在“頁面信息”的信息框中。而在Internet Explorer 8 及更高版本的 IE 中，文檔模式被顯示于Internet Explorer開發人員工具中，且可以被用戶更改。在 Internet Explorer 中還有 document.documentMode 的私有 JavaScript 擴展，其取值為 5, 7, 8, 9, 10 之一的浮點型變量。
以上是“HTML文檔類型DTD與瀏覽器怪異模式的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
