瀏覽器中的渲染模式

quirks 模式是指 web 瀏覽器保持向後相容的一種技術，它可相容只適用於舊版瀏覽器中的網頁，從而不適用標準模式中的 w3c 嚴格解釋和 ietf 標準。

概述

web 網頁的結構和外觀被兩中標準化語言共同描述：html，web 中用來設計的標記語言，它描述了網頁的內容和結構；css，廣義樣式表語言，用於指定各種**中的頁面應該如何被渲染（螢幕顯示的視覺樣式，當列印頁面時使用的列印樣式，使用螢幕閱讀器閱讀網頁的聽覺樣式等）。但是，大多數舊的 web 瀏覽器要麼沒有完全實現這些語言的規範，要麼基於之前的最終標準來開發（例如：在2023年發布的用於 macintosh 平台的 microsoft internet explorer 5.1，是第乙個完全支援 css 1 的主要 web 瀏覽器）。因此，許多舊的 web 網頁結構依賴於舊瀏覽器中不完整或不正確的實現，而且當這樣的瀏覽器進行處理時只會為其專門渲染。

近些年來，主要的 web 瀏覽器對 html 和 css 標準化的支援有著明顯的改善，但是大部分依賴於舊瀏覽器的 quirks 遺留文件呈現了對瀏覽器開發者們的阻礙，開發者們希望改進瀏覽器對 html 和 css 標準化的支援，但也希望能維持向後相容的舊的、非標準化的網頁。此外，許多新的網頁繼續按照原先的方式建立，因為瀏覽器開發者們介紹的相容性解決方法意味著這樣一種理解：標準化的方法並不是絕對必要。

為了保持大部分 web 網頁在不同瀏覽器中盡可能多的相相容，目前的 web 瀏覽器一般都具有多個渲染模式：在「標準模式」中，網頁根據 html 和 css 規範被渲染，而在「怪癖（quirks）模式」中則試圖去效仿舊瀏覽器中的行為。某些瀏覽器（例如那些基於 mozilla gecko 渲染引擎的瀏覽器）將使用「近似（almost）標準」的模式來試圖在兩者中進行妥協，實現了 table cell sizing 的 quirk，而其它方面則符合規範。

文件型別的比較

henri sivonen 編寫了含有各種檔案型別的網頁在大多數普通瀏覽器中的展現方式：quirks、standards、almost 標準中的任意一種模式。為「almost standards」使用標準是對 table cell height 進行非標準渲染。

doctype

ns6gecko pre-1.0.1

gecko 1.0.1+ & safari

opera 9

opera 7.5

ie 7 & opera 7.10

ie 6 & opera 7.0

ie mac

konq 3.2

noneqq

qqqq

qqqhtml 3.2 doctypeqq

qqqq

qqqhtml 4.0 strict doctype without system identifierss

sssa

aaahtml 4.01 strict doctype without system identifierss

sssa

aqahtml 4.0 strict doctype with system identifierss

sssa

aaahtml 4.01 strict doctype with system identifierss

sssa

aaahtml 4.0 transitional doctype without system identifierqq

qqqq

qqqhtml 4.01 transitional doctype without system identifierqq

qqqq

qqqhtml 4.01 transitional doctype with system identifierss

aaaa

aaqhtml 4.01 transitional doctype with system identifierqs

aaaa

aaqhtml 4.0 transitional doctype with system identifierqq

qqaa

aaqxhtml 1.0 strict doctype without an xml declarationss

sssa

aaaxhtml 1.0 transitional doctype without an xml declarationss

aaaa

aaqxhtml 1.0 strict doctype with an xml declaration

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

ssss

aqaq

xhtml 1.0 transitional doctype with an xml declaration

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

saaa

aqaq

iso html 2000 version doctype, short formqs

sqqq

qqqiso html 2000 version doctype, long formqs

sssa

aaqiso html 1999 version doctype, short formss

sqqq

qqqiso html 1999 version doctype, long formss

sssa

aaqhtml5qs

sssa

aadoctype

ns6gecko pre-1.0.1

gecko 1.0.1+ & safari

opera 9

opera 7.5

ie 7 & opera 7.10

ie 6 & opera 7.0

ie mac

konq 3.2

模式的差異和例項

在 quirks 和 standards 模式之間最顯著的乙個區別就是 internet explorer 在處理 css 盒子模型時的 bug。在版本 6 以前， internet explorer 在判定乙個元素盒子的寬度時所使用的演算法與 css 規範中的演算法在細節上有衝突，而且由於 ie 瀏覽器的普及，很多被建立的網頁都依賴於這個不正確的演算法。對此就版本 6而言，當渲染使用 standards 模式時，ie 將使用 css 的規範演算法；當渲染使用 quirks 模式時，ie 將使用之前的非標準演算法。

另乙個值得注意的區別就是行內某些元素的垂直對齊方式；雖然 css 的規範要求它們與盒子內的文字基線對齊，但許多老版本瀏覽器的影象是與所在盒子的底部邊框對齊。在 standards 模式中，基於 gecko 的瀏覽器將與基線對齊，但是在 quirks 模式中，它們將與底部對齊。

此外，許多舊的瀏覽器不能實現 table 中字型樣式的繼承；這樣一來，即使 css 規範要求 table 中的字型樣式可繼承, 但還是必須每次為其寫乙個特定的單獨樣式，並為 table 也寫乙個。如果字型大小被指定使用相對單位，那麼符合標準的瀏覽器將會繼承字型大小的基數，然後再把相對字型的大小賦予到 table 內：例如，乙個頁面宣告了字型大小的基數為 80％，table 裡面的字型大小也為 80%（以確保瀏覽器中字型 80% 的大小不能夠被正確的繼承），在符合標準的瀏覽器中，table 中字型將顯示為 64％（80％的80％）。因此，在 quirks 模式中，瀏覽器通常不會繼承 table 的字型大小。

almost standards 模式

基於 gecko 1.0.1 以後的瀏覽器（如firefox），safari 和 opera 7.5（及以後版本）有三分之一的相容模式被看為「almost standards 模式」，它保持了「傳統」的 table cell 的垂直大小，與 css2 的規範相違背。但這有效地使它們的應用更加接近於 internet explorer 的 standards 模式。

「almost standards」渲染模式與「standards」模式在很多細節上極其相似。首先，在 table cell 內的布局按照 gecko 中的「quirks」模式進行處理，這相當於和其它瀏覽器保持一致，例如 ie。這意味著，當在「quirks」或者「almost standards」模式下， table 中分割的布局在 mozilla 1.0.1 或以後的基於 gecko 渲染引擎的瀏覽器中不大可能會發生變化。

模式驗證

在大多數最新的瀏覽器中，文件物件模型的屬性 document.compatmode 表示當前頁面的渲染模式——在 standards 模式下， document.compatmode 包含值「css1compat」，而在 quirks 模式下，它包含值「backcompat」。

此外，在 mozilla firefox 和 opera 中，乙個給定的頁面所使用的渲染模式將會在"頁面資訊"的資訊框中顯示。

本文是使用

b3log solo 從

瀏覽器中的渲染模式

瀏覽器中的渲染模式

瀏覽器渲染模式

標籤指定瀏覽器渲染模式

瀏覽器中的渲染模式

瀏覽器中的渲染模式

瀏覽器渲染模式

標籤指定瀏覽器渲染模式

相關推薦