瀏覽器標準模式和怪異模式之間的區別是什麼?

2021-06-27 18:14:50 字數 1333 閱讀 1916

由於歷史的原因,不同瀏覽器對頁面的渲染是不同的,甚至同一瀏覽器的不同版本也是不同的。在w3c標準出台之前,不同的瀏覽器在頁面的渲染上沒有同一的規範,產生了差異,即quirks mode(怪異模式或相容模式);當w3c標準出台之後,不同瀏覽器對頁面的渲染有了統一的標準,即strict mode(標準模式或嚴格模式);這就是兩者之間的區別。

w3c標準推出前,舊的頁面都是根據舊的渲染方式對頁面進行渲染的,因此在w3c標準推出後為了保證舊頁面的正常顯示,保持瀏覽器的相容性,這樣瀏覽器上就產生了能夠相容w3c標準渲染的嚴格模式和保證舊頁面顯示的怪異模式的標準相容模式。

在標準模式中,瀏覽器根據規範呈現頁面;在混雜模式中,頁面以一種比較寬鬆的向後相容的方式顯示。
如果xhtml文件包含形式完整的doctype,那麼它一般以標準模式呈現。對於html 4.01文件,包含嚴格dtd的doctype常常導致頁面以標準模式呈現。包含過渡dtd和uri的doctype也導致頁面以標準模式呈現,但是有過渡dtd而沒有uri會導致頁面以混雜模式呈現。doctype不存在或形式不正確會導致html和xhtml文件以混雜模式呈現。
區別是:
1.在嚴格模式中 :width是

內容寬度 

,元素真正的寬度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width +  margin-right;

在怪癖模式中 :width則是

元素的實際寬度 

,內容寬度 = width - ( padding-left + padding-right + border-left-width + border-right-width)

2)可以設定行內元素的高寬

在standards模式下,給span等行內元素設定wdith和height都不會生效,而在quirks模式下,則會生效。

3)可設定百分比的高度

在standards模式下,乙個元素的高度是由其包含的內容來決定的,如果父元素沒有設定高度,子元素設定乙個百分比的高度是無效的。

4)用margin:0 auto設定水平居中在ie下會失效

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

body;#content

5)quirk模式下設定的padding會失效

6)quirk模式下table中的字型屬性不能繼承上層的設定

7)quirk模式下white-space:pre會失效

瀏覽器標準模式和怪異模式

要想寫出跨瀏覽器的css,必須知道瀏覽器解析css的兩種模式 標準模式 strict mode 和怪異模式 quirks mode 所謂的標準模式是指,瀏覽器按w3c標準解析執行 怪異模式則是使用瀏覽器自己的方式解析執行 因為不同瀏覽器解析執行的方式不一樣,所以我們稱之為怪異模式。瀏覽器解析時到底使...

瀏覽器標準模式和怪異模式

現代的瀏覽器一般都有兩種渲染模式 標準模式和怪異模式,在標準模式下,瀏覽器按照html和css標準對文件進行解析和渲染 而在怪異模式下,瀏覽器則按照舊有的非標準的實現方式對文件進行解析和渲染,這樣的話,對於舊有的網頁,瀏覽器就會啟動怪異模式,就能夠使得舊網頁正常顯示 對於新的網頁,則可以啟動標準模式...

瀏覽器的怪異模式和標準模式

怪異模式是讓ie的行為更接近ie5,標準模式則是讓ie的行為更接近標準。所以想寫跨瀏覽器的css,盡量使用標準模式。解決方案就是採用doctype宣告,大多數瀏覽器採用下面的這些判斷規則 對於那些瀏覽器不能識別的doctype宣告,瀏覽器採用strict mode解析 在doctype宣告中,沒有使...