<!DOCTYPE html>必须是文件第一个字符，前置任何空格、注释或BOM均触发怪异模式，导致document.compatMode为"BackCompat"，盒模型、Flex等行为异常。
DOCTYPE 必须是文件第一个字符，且只能写成 <!DOCTYPE html>——任何前置空格、注释、BOM 都会让浏览器直接进怪异模式，后续所有 CSS 和 HTML5 行为都不可靠。
document.compatMode 怎么查当前渲染模式
打开控制台，执行：document.compatMode。返回 "CSS1Compat" 是标准模式；返回 "BackCompat" 就是怪异模式。别信开发者工具里“Document Mode”这种 IE 专属字段，现代 Chrome/Firefox 已不显示它。
常见错误现象：
- 页面没加
<!DOCTYPE html>，但看起来“好像也能用”——其实盒模型、百分比高度、margin: 0 auto居中等行为已在漂移 - 构建工具（如某些 CMS 或模板引擎）在 HTML 头部自动注入注释或 BOM，肉眼看不到，但
document.compatMode已是"BackCompat"
为什么 <!DOCTYPE html> 不能有前置内容
浏览器解析 HTML 是流式进行的。只要开头遇到任意非空白字符（比如 <!-- 注释 -->、UTF-8 BOM EF BB BF、甚至一个空格），就会立刻锁定怪异模式——这个决定在 JS 执行前就已完成，document.compatMode 不可更改。
立即学习“前端免费学习笔记（深入）”；
正确写法只有一种：<!DOCTYPE html> 必须独占首行，且是文件第一个字节。
容易踩的坑：
- 编辑器默认保存为 UTF-8 with BOM，需手动切到 “UTF-8 without BOM”
- PHP 文件开头写了
<?php再 echo DOCTYPE，等价于前置内容 - Webpack/Vite 模板中用了
html-webpack-plugin的templateParameters插入变量，一不小心就在 DOCTYPE 前生成了空格
X-UA-Compatible 响应头会覆盖 DOCTYPE 吗
会。如果服务器返回了 X-UA-Compatible: IE=7 或 IE=EmulateIE8，哪怕 DOCTYPE 正确，IE/Edge（旧版）也会强制降级到对应模式，HTML5 元素无法被识别，<video>、<canvas> 直接不渲染。
验证方式：用 DevTools 的 Network 面板看主 HTML 资源的响应头，搜 X-UA-Compatible。若存在且值非 IE=edge 或已移除，就得改服务端配置。
实操建议：
- Nginx：加
add_header X-UA-Compatible "IE=edge,chrome=1"; - Apache：加
Header set X-UA-Compatible "IE=edge,chrome=1" - Node.js（Express）：
res.setHeader('X-UA-Compatible', 'IE=edge,chrome=1') - 静态托管（如 GitHub Pages、Vercel）通常不支持该头，此时必须依赖
<meta>回退（但仅对 IE 有效）
真正要盯住的不是某条 CSS 居中失效，而是 DOCTYPE 是否干净落位——它是一切渲染行为的开关，且一旦错，整页逻辑都在两个世界之间漂移。
