在標準模式頁面按照HTML,CSS的定義渲染，而在怪異模式就是瀏覽器為了兼容很早之前針對舊版本瀏覽器設計，并未嚴格遵循W3C標準而產生的一種頁面渲染模式。瀏覽器基于頁面中文件類型描述的存在以決定采用哪種渲染模式，如果存在一個完整的DOCTYPE則瀏覽器將會采用標準模式，如果缺失就會采用怪異模式。下面介紹標準模式和怪異模式之間的區別

（1 ）盒模型：

在怪異模式下，盒模型為IE盒模型，

而在W3C標準的盒模型中為

（2）圖片元素的垂直對齊方式：

? ? ? ?對于inline元素和table-cell元素，標準模式下vertical-align屬性默認取值為baseline，在怪異模式下，table單元格中的圖片的vertical-align屬性默認取值為bottom，因此在圖片底部會有及像素的空間。

（3）<table>元素中的字體：

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

（4）內聯元素的尺寸：

標準模式下，non-replaced inline元素無法自定義大小，怪異模式下，定義這些元素的width，height屬性可以影響這些元素顯示的尺寸。

（5）元素的百分比高度：

a：CSS中對于元素的百分比高度規定如下：百分比為元素包含塊的高度，不可為負值，如果包含塊的高度沒有顯示給出，該值等同于auto，所以百分比的高度必須在父元素有高度聲明的情況下使用。

b：當一個元素使用百分比高度時，標準模式下，高度取決于內容變化，怪異模式下，百分比高度被正確應用。

（6）元素溢出的處理：

標準模式下，overflow取默認值visible，在怪異模式下，該溢出會被當做擴展box來對待，即元素的大小由其內容決定，溢出不會裁減，元素框自動調整，包含溢出內容。

本面試題為前端常考面試題，后續有機會繼續完善。我是歌謠，一個沉迷于故事的講述者。

歡迎一起私信交流。

“睡服“面試官系列之各系列目錄匯總（建議學習收藏）?

總結

以上是生活随笔為你收集整理的“约见”面试官系列之常见面试题之第五十二篇之标准模式和怪异模式（建议收藏）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。