css怪异模式（Quirks Mode）和标准模式（Standards Mode）最明显的区别-CSDN博客

css怪异模式（Quirks Mode）和标准模式（Standards Mode）最明显的区别

最核心的区别：
盒模型（Box Model）的计算方式不同，导致元素的 width 和 height 是否包含 padding 和 border。

特性	标准模式（Standards Mode）	怪异模式（Quirks Mode）
盒模型	`width` = 内容宽度（不包含 `padding` 和 `border`）	`width` = 内容 + `padding` + `border`
触发方式	`<!DOCTYPE html>` 声明	无 `DOCTYPE` 或使用旧版 `DOCTYPE`（如 HTML4 Transitional）
浏览器兼容性	所有现代浏览器统一行为	模拟旧版浏览器（如 IE5.5）的渲染方式
`height: 100%` 行为	严格计算，需父元素有明确高度	可能不准确，导致布局错乱
`margin: auto` 居中	正常生效	可能失效

.box {
  width: 100px;
  padding: 20px;
  border: 5px solid black;
}

.box {
  width: 100px;
  padding: 20px;
  border: 5px solid black;
}

标准模式：使用 <!DOCTYPE html>（HTML5 声明）。
怪异模式：省略 DOCTYPE 或使用旧版 DOCTYPE（如 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">）。

行内元素垂直对齐
- 标准模式：vertical-align 按规范生效。
- 怪异模式：行为可能不一致（如 img 底部默认间隙问题）。
表格单元格宽度
- 标准模式：严格按内容计算。
- 怪异模式：可能自动拉伸。
JavaScript 获取窗口尺寸
- 标准模式：document.documentElement.clientWidth。
- 怪异模式：document.body.clientWidth。