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

2022-09-02 17:21:08 字數 1120 閱讀 8674

瀏覽器解析css的兩種模式:標準模式(strict mode)和怪異模式(quirks mode)。

標準模式:瀏覽器按w3c標準解析執行**;

怪異模式:使用瀏覽器自己的方式解析執行**,因為不同瀏覽器解析執行的方式不一樣,所以稱之為怪異模式。

瀏覽器解析時使用標準模式還是怪異模式,與網頁中的dtd宣告直接相關,dtd宣告定義了標準文件的型別(標準模式解析)文件型別,會使瀏覽器使用相關的方式載入網頁並顯示,忽略dtd宣告,將使網頁進入怪異模式(quirks mode)。

區別是:

1、盒模型:

在怪異模式下,盒模型為ie模型

而在w3c標準的盒模型中危:

2、元素的垂直對齊方式

對於inline元素和table-cell元素,標準模式下vertical-align屬性預設取值是baseline;在怪異模式下,table單元格中的的vertical-align屬性預設取值是bottom。因此在底部會有及畫素的空間。

3、元素中的字型

css中,對於font的屬性都是可以繼承的。怪異模式下,對於table元素,字型的某些元素將不會從body等其他封裝元素繼承中的得到,特別是font-size屬性。

4、內聯元素的尺寸

標準模式下,non-replaced inline元素無法自定義大寫;

怪異模式下,定義這些元素的width、height屬性可以影響這些元素顯示的尺寸。

5、元素的百分比高度

css中對於元素的百分比高度規定:百分比為元素包含塊的高度,不可為負值;如果包含塊的高度沒有顯示給出,該值等同於auto,所以百分比的高度必須是在元素有高度宣告的情況下使用。

當乙個元素使用百分比高度是,標準模式下,高度取決於內容變化,怪異模式下,百分比高度被準確應用

6、元素溢位的處理

標準模式下,overflow取值預設為visible;在怪異模式在,該溢位會被當做擴充套件box來對待,即元素的大小由內容決定,溢位不會裁剪,元素框自動調整,包含溢位內容。

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

兩者的區別 1.盒模式的解析上 在strict mode 中 width是內容寬度 在quirks mode 中 width則是元素的實際寬度,而內容寬度 width margin left margin right padding left padding right border left bo...

瀏覽器標準模式 怪異模式的區別

瀏覽器解析css的兩種模式 標準模式 strict mode 和怪異模式 quirks mode 標準模式 瀏覽器按w3c標準解析執行 怪異模式 使用瀏覽器自己的方式解析執行 因為不同瀏覽器解析執行的方式不一樣,所以稱之為怪異模式。瀏覽器解析時使用標準模式還是怪異模式,與網頁中的dtd宣告直接相關,...

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

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