《八》浏览器的标准模式和怪异模式

花铛

已于 2025-01-24 15:11:30 修改

阅读量460

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： CSS

于 2019-03-13 11:27:21 首次发布

本文链接：https://blog.youkuaiyun.com/wsln_123456/article/details/86616508

CSS 专栏收录该内容

19 篇文章

订阅专栏

本文深入探讨浏览器解析CSS的两种模式：标准模式与怪异模式，分析其在盒模型、垂直对齐、字体样式等方面的差异，并解释如何通过DOCTYPE声明选择正确的解析模式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浏览器解析 CSS 的两种模式：标准模式和怪异模式。

标准模式：浏览器按 W3C 标准解析执行代码。
怪异模式：使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以称之为怪异模式。

浏览器解析使用标准模式还是怪异模式，与 DTD 声明直接相关。如果网页代码不含有任何 DTD 声明，那么浏览器就会采用怪异模式解析；如果网页含有 DTD 声明，浏览器就会按照声明的标准解析。

<!-- DTD 声明 -->
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <title>Hello CSS</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

判断是哪种模式：

window.top.document.compatMode：属性值 CSS1Compat 为标准模式，BackCompat 为怪异模式。

区别：

盒模型：标准模式下，盒模型为 W3C 模型，width = content；怪异模式下，盒模型为 IE 模型，width = content + padding + border。
元素溢出的处理：标准模式下，overflow 的默认值是 visible；怪异模式下，当内容超出容器高度时，会把容器拉伸。
行内元素的宽高：标准模式下，给行内元素设置 wdith 和 height 都不会生效；怪异模式下，会生效。
水平居中：标准模式下，使用 margin:0 auto 可以使元素水平居中；怪异模式下，不生效。
垂直对齐方式：标准模式下， vertical-align 属性的默认值是 baseline；怪异模式下，vertical-align 属性的默认值是 bottom。
字体样式：标准模式下，表格中的字体样式会被继承；怪异模式下，表格中的字体样式不会被继承。
怪异模式下，颜色值必须用十六进制标记法。