DOCTYPE必须是文件首字节，前置注释、空格或BOM均触发怪异模式，导致盒模型、布局逻辑退化至IE5.5行为，且无法通过CSS修复。
DOCTYPE缺失或位置错误直接触发怪异模式
没写<!DOCTYPE html>，或者它前面有注释、空格、BOM头，浏览器就会退化到怪异模式——盒模型、行高、表格对齐全乱套，且无法通过CSS修复。这不是“样式不一致”，是底层渲染逻辑切换。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
<!DOCTYPE html>必须是文档第一行，前面不能有任何字符（包括UTF-8 BOM） - 用VS Code打开文件后右下角检查编码是否为“UTF-8 无BOM”，否则保存时勾选“保存为UTF-8（无BOM）”
- CI流程中加校验脚本：grep -q '^<!DOCTYPE html>' index.html || exit 1
HTML5语义标签在IE8–9中被当作文本节点
<section>、<nav>这些标签在IE8及更早版本里根本不是元素，document.querySelector('section')返回null，CSS选择器也不匹配，连默认样式都没有。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 仅对IE9以下加载
html5shiv：<!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script><![endif]--> - 不要在
<head>里用document.createElement('section')手动注册——它只对后续创建的元素生效，已解析的DOM仍无效 - 若项目已放弃IE8–9，删掉所有
html5shiv引用，避免冗余脚本和潜在冲突
自闭合标签在IE中引发DOM结构错位
写<img src="x"><input type="hidden">这种没闭合的标签，IE会自动补成<input type="hidden"></input>，导致querySelectorAll('input')拿到2个节点（实际只有1个），JS逻辑全崩。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 禁用IDE的“自动闭合标签”提示，改用
HTMLHint插件校验："tag-self-close": false（强制要求<img>写成<img />或<img></img>） - 动态插入HTML前，优先用
document.createElement+appendChild组装，避开IE的容错解析 - W3C Validator在线检测，重点看“Start tag omitted”类警告——那意味着IE可能已经改写了你的DOM树
现代属性如inert或popover在Safari/Edge中静默失效
inert在Safari 16.4才支持，popover在Chrome 114+才有完整实现，但它们在不支持的浏览器里既不报错也不生效——元素照常可聚焦、可点击，功能逻辑却断了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 查
caniuse.com确认目标用户覆盖率达95%以上再用，否则必须手写降级逻辑（比如用aria-hidden="true"+tabindex="-1"模拟inert） - 避免把
inert当CSS开关用：[inert] { pointer-events: none; }在旧浏览器里完全无效，得单独写.is-inert类 -
popover目前没有可靠polyfill，需回退到dialog+ 手动管理open状态，或用第三方库如@floating-ui/dom
