必须用<!DOCTYPE html>且置于文件首字节,否则浏览器触发怪异模式:document.compatMode返回BackCompat,导致盒模型、scrollTop、getBoundingClientRect()等行为退化至IE5.5标准。

没有 <!DOCTYPE html>,浏览器大概率会用怪异模式解析你的 HTML —— 这不是警告,是事实。它直接影响 <div> 的盒模型计算、getBoundingClientRect() 返回值、甚至 document.body.scrollTop 是否可用。
为什么 <!DOCTYPE html> 必须放在第一行?
它不是标签,是解析指令;浏览器一读到文档开头,就立刻决定用哪种模式渲染。一旦前面有 BOM、空格、注释或任何字符,document.compatMode 就可能返回 "BackCompat",而不是 "CSS1Compat"。
- 常见错误:VS Code 自动生成的 UTF-8 BOM(尤其 Windows 环境下保存为“UTF-8 with BOM”)
- 验证方法:在控制台运行
document.compatMode,结果不是"CSS1Compat"就说明出问题了 - 编辑器设置建议:保存时选 “UTF-8 without BOM”,或用命令行工具如
xxd检查文件开头字节
<!DOCTYPE html> 和旧版 DOCTYPE 的关键区别
HTML5 的 <!DOCTYPE html> 不引用 DTD,不依赖外部文件,也不校验语法 —— 它唯一作用就是触发标准模式。而 HTML 4.01 或 XHTML 的 DOCTYPE 需要完整声明公共标识符和系统标识符,比如:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
这类写法容易出错:URL 失效、大小写不一致、引号遗漏、空格多一个少一个,都会让浏览器退回到怪异模式。
立即学习“前端免费学习笔记(深入)”;
- HTML5 版本大小写不敏感,但惯例全小写;
<!doctype html>也合法,但不推荐 - 旧版 DOCTYPE 中的 URI 地址只是形式,现代浏览器根本不请求它,但拼写错误仍会触发怪异模式
- XHTML 的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">已无实际必要,除非你真在用 XML 解析器
怪异模式下哪些 CSS/JS 行为会悄悄变样?
这不是“样式没生效”,而是底层解析逻辑不同。很多 bug 看似随机,根源就在 DOCTYPE 缺失或错误。
-
box-sizing: border-box在怪异模式下对<table>无效,padding仍撑开宽度 -
offsetWidth计算包含border的方式与标准模式不一致(尤其 IE 兼容路径遗留) -
document.documentElement.scrollTop在怪异模式下不可靠,必须改用document.body.scrollTop(反之亦然) -
line-height在内联元素中的继承行为异常,导致文字垂直对齐错位
最麻烦的不是报错,而是它不报错 —— 页面看起来“差不多”,但在 Safari 和 Firefox 里 margin 表现不同,或某天 Chrome 升级后布局突然塌陷。这种问题往往排查半天才发现是 <!DOCTYPE html> 被模板引擎自动删掉了,或者构建脚本把首行注释当冗余清除了。



















