HTML - 標準模式 vs. 怪異模式

時間 2020-07-25

標籤 html 標準模式怪異欄目 HTML 简体版

原文原文鏈接

前言

在實現html和css標準化以前，各個瀏覽器對html和css的解析各有不一樣，甚至是同一個瀏覽器的不一樣版本渲染方式也不一樣（好比：IE6&IE7）。在W3C指定標準以後，瀏覽器既要按照標準去實現HTML和CSS的支持，又要保證可以兼容之前的非標準的舊網頁，因而就有了如今所說的標準模式和兼容模式。css

瀏覽器如何肯定渲染模式

在編寫HTML文檔時，通常都會在文檔的開頭（html標籤以前）聲明文檔類型：DOCTYPE。當瀏覽器在解析html文檔時，若遇到正確的文檔聲明，則啓用標準模式，按照標準來解析和渲染文檔。而對於舊的html文檔或沒有DOCTYPE聲明的文檔，則按照怪異模式來解析文檔。瀏覽器採用了兩種模式，用以把能符合新規範的網站和老舊網站區分開。html

html5的文檔聲明方式：<!DOCTYPE HTML>html5

如何判斷這兩種模式

一、在 Firefox中，請從右鍵菜單選擇查看頁面信息，而後查看渲染模式。瀏覽器

二、在 Internet Explorer中，請按下F12，而後查看文檔模式。字體

三、經過代碼判斷：網站

window.top.document.compatMode 若是語句返回爲：backCompat表示怪異模式，若是爲CSS1Compat則表示爲標準模式。ui

標準模式（strict mode）

標準模式（嚴格模式），瀏覽器按W3C標準解析執行代碼，spa

怪異模式（quirks mode）

怪異模式（混雜模式），使用瀏覽器本身的方式解析執行代碼code

標準模式和怪異模式的區別

一、width不一樣htm

　　在標準模式中：width是內容（content）寬度，元素真正的寬度是外邊距、內邊距、邊框寬度的和，即元素寬度 = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right。

　　在怪異模式中：width則是元素的實際寬度，width = border-left-width + padding-left+ 內容(content)寬度 + padding-right + border-right-width。

二、內聯元素的尺寸

　　標準模式中，給span等行內元素設置width和height都不會生效，而在怪異模式下，卻會生效。

三、可設置百分比的高度

　　在標準模式下，一個元素的高度由其包含的內容content決定，若是父元素沒有設置高度，子元素設置一個百分比高度是無效的。

四、用margin : 0 auto設置水平居中

　　在標準模式下可使元素水平居中，可是在怪異模式下，無效，能夠用text-align : center;來實現居中。

五、怪異模式下設置圖片的padding會失效

六、怪異模式下table中的字體屬性不能繼承上層的設置

七、元素溢出的處理

　　標準模式下，overflow默認去visible，在怪異模式下，溢出會被當作擴展box來對待，溢出不會裁減，元素框自動調整大小，可以包含溢出內容。