一眼确认怪异模式：执行document.compatmode，返回"backcompat"即确诊；doctype必须是文件首字节，注释、bom、空格、小写doctype或缺uri的旧声明均触发怪异模式。

DOCTYPE 不对，布局就不可信——不是“可能出错”，而是盒模型、height 计算、margin 行为全都会退化到 IE5.5 风格。

怎么一眼确认页面进了怪异模式

打开控制台，直接执行 document.compatMode：

• 返回 "CSS1Compat" → 标准模式，安全
• 返回 "BackCompat" → 怪异模式，已确诊，立刻排查 DOCTYPE

别信开发者工具里“Document Mode”字段（Chrome/Firefox 已移除），也别靠“居中不对”“高度塌陷”来猜——很多问题（比如 height: 50% 在三层嵌套后失效）根本没法肉眼定位。

哪些 DOCTYPE 写法会触发怪异模式

只要 不是文件第一个字节，<a style="color:#f60; text-decoration:underline;" title="浏览器" href="https://m.php.cn/zt/16180.html" target="_blank">浏览器</a>就立即锁定怪异模式。常见踩坑点：

• <!-- 注释 -->：注释在前 → 怪异模式
• \n：开头换行或空格 → 怪异模式
• UTF-8 BOM（EF BB BF）：用记事本保存的 HTML 文件常带此头 → 怪异模式
• <?php echo $debug; ?>：PHP 模板里服务端输出前置内容 → 怪异模式
• （小写 doctype）：IE8 及更早内核无法识别 → 怪异模式
• （大写 HTML）：部分 Safari 版本进近标准模式，影响 <code><table> 内图片对齐<p>旧式声明如 <code>（缺 URI）也会触发怪异模式，现代项目一律不用。
  

  Article To Html

  文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

  下载

  构建流程中容易被忽略的“隐形前置”

  Webpack/Vite 插件、Vue/React SSR 渲染、CMS 模板引擎，都可能在生成 HTML 时自动注入 runtime 脚本、注释或空行——这些内容看不见，但足以让 document.compatMode 返回 "BackCompat"。

  验证方法：

  • 用编辑器以十六进制查看文件开头，确认首三字节不是 EF BB BF
  • 在浏览器里右键“查看网页源代码”，肉眼确认 是否真在第一行、第一个字符位置
  • 执行 document.doctype：返回 null 就说明没生效

  为什么必须用 （全小写、无空格、无 URI）

  这是唯一被所有现代浏览器一致识别、且 100% 触发标准模式的写法：

  • 不依赖 DTD，解析快，无网络请求
  • 大小写敏感： ✅，<code> ❌（IE8-）
  • 不能加空格： 或 都会失败
  • URI 和 SYSTEM 声明（如 XHTML 的 DTD 地址）不仅没必要，还可能意外触发近标准模式

  真正要盯住的，从来不是“怎么调 margin 居中”，而是这一行是否干净落位——一个隐藏的 BOM 或构建时注入的换行，就能让整页 CSS 在两个世界之间漂移。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！