HTML跨浏览器兼容性靠三件事持续盯住：DOCTYPE必须顶格无BOM、语义标签需手动设display:block、JS/CSS须基于特性存在性检测而非UA判断；漏任一环节，修复必随时间失效。
HTML跨浏览器兼容性问题不是“修一次就完事”，而是靠三件事持续盯住：DOCTYPE是否始终顶格、语义标签是否在目标环境里被当块级元素渲染、JS/CSS是否只依赖特性存在性而非版本猜测。漏掉任何一项，修复都会随时间失效。
DOCTYPE开头有空格或BOM就直接进怪异模式
这是所有兼容问题的开关——只要DOCTYPE html>前面有任何字符（空格、注释、UTF-8 BOM），IE和旧Edge立刻切到Quirks Mode，盒模型、document.body.scrollTop、浮动逻辑全乱套。
- 验证方式：Chrome DevTools → Elements面板顶部看渲染模式，必须显示
Standards；若为Quirks，就得逐字检查HTML源码开头 - VS Code右下角确认编码是
UTF-8 without BOM，不是UTF-8 with BOM - PHP模板里常见陷阱：
<?php echo $title; ?>如果输出前有空白，就会把DOCTYPE顶出第一行
IE8–IE11里等标签仍是inline，仅引html5shiv不够
html5shiv只解决DOM识别问题，不改默认display值。结果nav被当内联元素渲染，margin/padding失效，CSS选择器也选不到。
- 必须手动加CSS规则：
header, nav, section, article, aside, footer, main { display: block; } - 条件加载更安全：
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script><![endif]--> - IE9–11虽能创建
section节点，但document.querySelector('section')仍可能返回null，得配合CSS+shiv双保险
CSS默认样式不统一，normalize.css必须早于所有自定义CSS加载
Chrome的h1默认margin-top是0.67em，Firefox是0.83em，IE6甚至用像素。不统一就等于给每个浏览器发不同图纸。
立即学习“前端免费学习笔记（深入）”；
- 别用
reset.css：它把所有margin/padding归零，反而要重写大量基础样式 -
normalize.css保留合理默认值（如表单控件尺寸、列表缩进），只修复已知bug -
<link rel="stylesheet" href="normalize.css">必须放在任何自定义CSS之前 - 务必加全局
box-sizing重置：* { box-sizing: border-box; }，否则IE宽高计算比现代浏览器多算一个padding
JS不能靠navigator.userAgent判断，得测真实行为
navigator.userAgent字符串极易伪造、过时，新版Safari常伪装成旧版绕过限制，Android WebView也可能声称支持localStorage但实际抛QuotaExceededError。
- 正确检测方式：
'localStorage' in window只是第一步，还得真正读写一次：try { localStorage.setItem('__test__', ''); localStorage.removeItem('__test__'); return true; } catch(e) { return false; } -
document.createElement('header').nodeType === 1比typeof document.querySelector === 'function'更能反映语义标签可用性 - 对
IntersectionObserver这类API，存在≠可靠：旧版安卓WebView中它存在但observe()不触发回调，得结合超时降级
真正难维护的不是补丁本身，而是每次新增功能时是否自动继承这三根柱子：新写的section有没有配display:block、新引入的CSS是否加载在normalize.css之后、新调用的API有没有做运行时行为检测。漏掉一次，就埋下一个未来必爆的兼容雷。
