KB001 相容性問題與瀏覽器的核心及渲染模式

2021-05-31 23:58:24 字數 3524 閱讀 8136

原頁面位址  

目前市面上流行的瀏覽器有多種,這些瀏覽器在處理乙個相同的頁面時,表現或行為有時會有差異。

這種差異可能很小,甚至不會被注意到;也可能很大,甚至造成在某個瀏覽器下無法正常瀏覽。

我們把引起這些差異的問題統稱為「瀏覽器相容性問題」。

各品牌瀏覽器的核心是不同的,不同的核心處理同一段**的時候思路不同。因此可以說,瀏覽器間核心的差異是產生相容性問題的根本原因。

「核心」也稱為「引擎」。常見的瀏覽器及其渲染引擎(又稱排版引擎)、指令碼引擎的列表1如下:

browser name

layout engine

ecmascript engine

internet explorer 6 - 8

trident

jscript

firefox 3.5

gecko

tracemonkey

chrome 4

webkit

v8safari 4

webkit

squirrelfish extreme

opera 10

presto

carakan 注:

瀏覽器的工作模式常被稱為「渲染模式」。實際上瀏覽器不同的工作模式不僅對渲染有影響,對**的解析以及指令碼的行為也同樣有影響。

從更廣泛的角度來看,瀏覽器的工作模式的差異不僅體現在處理 html 頁面的時候,處理 xml 及一些非 web 內容時也有模式上的差異,但本文僅討論瀏覽器在處理 html 頁面時工作模式。1 注:

關於瀏覽器的工作模式的更多資訊,請參考 activating browser modes with doctype。

微軟於 2001 年 8 月 27 日發布的 ie6(internet explorer 6)增強了對 css1 的相容1,這使得 ie6 對 css 的解析及渲染與它的前乙個版本 ie5.5 有了很大的差別,如對盒模型的理解2、**尺寸的演算法3等。

為了保持良好的向後相容性,微軟為使用者提供了乙個「開關」,來決定瀏覽器的工作模式

4,這個「開關」就是頁面頂部的 dtd。

某些 dtd 將使 ie6 工作在「標準相容模式」(即「標準模式」),這種模式使用了 ie6 最新的處理方式,包括對 css1 的相容及一些 dhtml 方面的增強。

而另一些 dtd,包括不設定 dtd 將使 ie6 工作在「向後相容模式」(即「混雜模式」),這種模式對頁面的處理是與 ie5.5 保持一致的,這樣就可以保證對一些在 ie5.5 中表現良好的頁面在 ie6 中也能達到同樣的效果。

微軟在後續推出的 ie7、ie8 中,也使用了上述「開關」,與 ie6 一樣,在 ie7、ie8 的「混雜模式」下,對頁面處理方式仍與 ie5.5 一致。因此可以說,ie 系列的「混雜模式」,將瀏覽器的行為凍結在了 ie5.5 這個版本,雖然 ie 各版本的混雜模式也略有區別5,但它們的本意都是向後相容。

隨著時間的推進和標準的進步,ie6、ie7 的「標準模式」逐漸已經變得不夠標準了,2023年3月19日發布的 ie8 重新定義了「標準模式」,再次增強了對標準規範的支援,同時為了保持對 ie7 的相容,ie8 增加了一種工作模式:「接近標準模式」。於是,ie8 的工作模式就分成了三種:「標準模式」、「接近標準模式」和「混雜模式」6。

目前所有主流瀏覽器對於向後相容問題的處理都與 ie 系列一樣,提供了不同的模式7來保證向後相容。

瀏覽器的工作模式就是在這種背景下誕生的,它很好的解決了瀏覽器對標準支援上的不斷增強及對一些錯誤的修復而導致的向後相容問題,但也將瀏覽器在不同情況下的表現及行為變得更加複雜多樣。

通過以上的內容,我們可以得出結論:如果乙個頁面能使各瀏覽器都工作在「標準模式」下,那麼各瀏覽器都將盡量相容標準,因此各瀏覽器之間表現出的差異是很少的。相反,如果乙個頁面使各瀏覽器都工作在「混雜模式」下,那麼各瀏覽器都將盡量向後相容,因此各瀏覽器之間表現出的差異將會最大化。 注:

關於 ie6 的更多資訊,請參考 維基百科 - internet explorer 6。

關於此問題,請參考 w3h - rd8001: 各瀏覽器中 'width' 和 'height' 在某些元素上的作用位置有差異。

關於此問題,請參考 w3h - re8017: ie firefox opera 的混雜模式對於 td 元素的百分比高度計算錯誤。

關於 ie6 對瀏覽器工作模式的區分的詳細資訊,請參考 msdn - css enhancements in internet explorer 6。

比如 ie6 的混雜模式有著名的「雙邊距 bug」,而 ie7 和 ie8 的混雜模式則沒有這個問題。

關於此問題,請參考 w3h - rx2001: ie5.0 ie5.5 ie6 中浮動元素在某些情況下會有雙倍外邊距。

document.compatmode 最先出現在 ie6 中,它的值標示了瀏覽器的工作模式,「標準模式」返回「css1compat」,「混雜模式」返回「backcompat」。這一做法到目前為止仍被所有主流瀏覽器所採用。

需要注意的是:在後來出現的「接近標準模式」中,document.compatmode 的返回值與「標準模式」一致,為「css1compat」。也就是說,不能通過 document.compatmode 來詳細區分瀏覽器的工作模式,只能用來判斷瀏覽器是否工作在「混雜模式」下。

因為「標準模式」與「接近標準模式」之間的差異並不大,所以這個方法至今仍被廣泛使用。

關於 firefox 中 dtd 與瀏覽器工作模式的詳細資訊,請參考 mozilla's doctype sniffing,關於 opera 中 dtd 與瀏覽器工作模式的詳細資訊,請參考 doctype switches support in opera presto 2.6。

q 代表「混雜模式」,a 代表「接近標準模式」,s 代表「標準模式」。

doctype

ie6opera 7.0

ie7opera 7.1

ie8opera 9.5

opera 9.0

firefox

chrome

safari

opera 10

(推薦!)aa

sssq

qqqq

aaas

saaa

ssaa

assa

aass

qqqq

qaaa

qqqq

qqqa

aaaa

aaaa

aaas

ssaa

sssa

asss

aaaa

aaas

ssqq

qqsq

qqqs

在編寫乙個頁面時,要使用可以觸發各瀏覽器「標準模式」的dtd,並書寫符合規範的**,以保證您的頁面在各瀏覽器中可以最大程度的相容。

作業系統版本:

windows 7 ultimate build 7600

瀏覽器版本:

ie6ie7

ie8firefox 3.6

chrome 4.0.302.3 dev

safari 4.0.4

opera 10.50

測試頁面:

2010-07-22

瀏覽器 相容性 核心 渲染模式

KB001 相容性問題與瀏覽器的核心及渲染模式

ie 系列的 混雜模式 將瀏覽器的行為凍結在了 ie5.5 這個版本,雖然 ie 各版本的混雜模式也略有區別 5,但它們的本意都是向後相容。ie8 重新定義了 標準模式 再次增強了對標準規範的支援,同時為了保持對 ie7 的相容,ie8 增加了一種工作模式 接近標準模式 於是,ie8 的工作模式就分...

瀏覽器相容性問題

苦惱的區別 1.image repeat 在火狐裡比較正常,可是在ie中一直repeat.背景是乙個關閉的x號,div設定的backgourn image url xx 結果在ie中卻不行,最後找到原因是ie中要顯式的寫上image repeat norepeat這屬性,還有好多的差異,明天 去了 ...

瀏覽器相容性問題

瀏覽器相容問題一 不同瀏覽器的標籤預設的外補丁和內補丁不同 問題症狀 隨便寫幾個標籤,不加樣式控制的情況下,各自的margin 和padding差異較大。碰到頻率 100 解決方案 css裡 備註 這個是最常見的也是最易解決的乙個瀏覽器相容性問題,幾乎所有的css檔案開頭都會用萬用字元 來設定各個標...