快速确认是否进入怪异模式：打开chrome devtools elements面板顶部看渲染模式，显示“standards”即标准模式，显示“quirks”即怪异模式；同时执行document.compatmode，返回“css1compat”为标准模式，“backcompat”为怪异模式。
怎么快速确认是不是掉进了怪异模式
渲染不一致的第一道筛子，就是看浏览器是否用了标准模式。只要 前面多一个空格、BOM 字节或注释，IE/Edge Legacy 和旧 Safari 就立刻切到怪异模式——盒模型按 IE5 算，<code>float 不触发 BFC，vertical-align 行为全乱。
验证方式很简单：
• 打开 Chrome DevTools 的 Elements 面板，顶部看渲染模式，显示 Standards 才算过关；
• 如果显示 Quirks，就说明已中招，得立刻回查 HTML 源码开头；
• VS Code 右下角检查编码是否为 UTF-8 without BOM，BOM 会导致 IE/Edge 直接忽略 DOCTYPE。
结构标签（<header></header>、<nav></nav>）不显示或错位的根因
不是标签写错了，是浏览器对这些 HTML5 标签的默认 display 值根本不同：Chrome 可能默认加 margin，Firefox 给了 padding，Safari 曾把 <footer></footer> 当成 inline 元素处理。
必须显式声明基础样式：
header, nav, section, article, aside, footer, main { display: block; margin: 0; padding: 0; }- IE8–9 不光不认识标签，连 DOM 节点都不创建，仅加 CSS 无效，必须配合
html5shiv.min.js； - 脚本要放在所有
<link>之前，否则样式规则可能被跳过； - 用条件注释精准投递：
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script><![endif]-->。
Flexbox 在 Safari/IE11 中塌陷或换行异常怎么办
这不是 bug，是实现分歧：Safari 14–15 对 flex 子项的 min-width 计算有偏差，图片或 <input> 容易撑破容器；IE11 只认老版 Flex 语法，flex: 1 直接失效，gap 完全不识别。
实操建议：
- Safari 下给
flex子项加min-width: 0（文本类）或min-width: fit-content（内联内容）； - IE11 别写
flex: 1，拆成flex-grow: 1; flex-shrink: 1; flex-basis: 0;； -
gap在 IE11 和旧 Safari 里无效，改用margin模拟，或用@supports (gap: 0)做特性检测； - 测试 IE11 时，F12 → Emulation → Document mode 设为 11，别用 Edge 模式糊弄自己。
怎么用工具验证 HTML 结构本身是否合规
很多“不一致”其实源于浏览器对未闭合标签、缺失父容器或非法嵌套的容错策略不同。比如 <div><p>文本</p></div>（<p></p> 没闭合），Chrome 可能自动补全，Safari 可能直接截断后续内容。
最有效的办法是跑一次 W3C 验证：
- 访问
https://validator.w3.org/nu/，选 “Validate by Direct Input”； - 粘贴完整 HTML，确保开头是干净的
； - 重点关注警告如
End tag for element X implied, but there were open elements； - 避免依赖浏览器自动闭合，显式写出
、、
真正麻烦的往往不是标签不显示，而是 margin 折叠方式不同、flex 容器内行为不一致这类隐性问题——得盯着盒模型数值调，不能只看页面长什么样。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
