有多少種瀏覽器模式？ 瀏覽器的標準模式和怪異模式的區別

一般有兩種，一種是用於速度模式的 chrome 核心，另一種是用於相容模式的 IE 核心。

我真的不知道有什麼區別，但是很多時候我無法用速度模式開啟網頁，或者開啟時顯示有問題，所以我可以通過切換到相容模式來解決。

有兩個。 帶有 chrome 核心 Google 的 Turbo 模式。

相容模式是 Microsoft 的 IE 核心。

其他 360 個基於 IE 核心。

一。 標準模式和怪異模式。

二。 區分。 箱體型號

在怪異模式下，瀏覽器的盒子模型是伏打IE盒子模型; 並在標準模式下。 瀏覽器的 box 模型是標準的 box 模型。 兩者的區別在於元素的寬度和高度的計算不同。

IE盒模型

標準箱型

** 垂直對齊

為inline跟table-cell元素，標準模式vertical-align該屬性的預設值為baseline

詭異模式vertical-align該屬性的預設值為bottom

元素的溢位處理

標準模式overflow預設值為visible

奇怪模式下的元素溢位不會被裁剪，元素的大小由其內容決定，內容會自動調整。

內聯元素的大小

在標準模式下，內聯元素的寬度和高度無法自定義，而在奇怪模式下，寬度和高度會影響其大小。

Table 元素

在 CSS 中，字型是繼承的，但在奇怪的模式下，字型的某些屬性不會從其他元素（如 body）繼承，尤其是 font-size 屬性。

元素的百分比寬度

CSS中元素的百分率高度是指定的：百分百是元素所包含的塊的高度，不能為負值; 如果未顯示包含塊的高度，則該值等效於 auto，因此，如果元素具有高度宣告，則必須使用高度百分比。

當元素使用高度的百分比時，在標準模式下，高度取決於內容的變化，在奇怪的模式下，百分比高度被準確應用。

在標準模式下：瀏覽器根據 HTML 和 CSS 標準解析和呈現文件;

在怪異模式下：瀏覽器根據舊的非標準實現解析和呈現文件。

所以對於舊版網頁時，瀏覽器將啟動詭異模式使舊網頁正常顯示;

為新網頁，您可以開始標準模式使新網頁能夠使用 HTML 和 CSS 的標準功能。

標準模式和怪異模式之間的兩個常見區別

處理盒子模型中的差異

標準 CSS 框模型的寬度和高度等於內容區域的高度和寬度，並且不包括填充和邊框，而 IE6 之前的瀏覽器實現了框模型的寬度和高度，以包括填充和邊框。

因此，對於IE來說，怪異模式和標準模式的箱體模型寬度和高度計算方法不同;

內聯元素的垂直對齊

許多早期的瀏覽器將 ** 與包含它們的框的下邊框對齊，儘管 CSS 規範要求它們與框文字的基線對齊。

在標準模式下，基於 Gecko 的瀏覽器將與基線對齊，而在 Quirks 模式下，它們將與底部對齊。 最直接的例子是**的顯示。

在標準模式下，它與父元素的下邊框不對齊，如果仔細觀察，會看到父元素的下邊框之間有乙個小間隙。

這是因為在標準模式下，** 與基線對齊。 在奇怪的模式下，情況並非如此。