HTML结构兼容性问题90%出在解析阶段：IE8–10等旧浏览器不识别语义标签，导致DOM缺失；需用html5shiv注册标签并手动设display: block，同时确保DOCTYPE首行无空格或BOM，否则触发怪异模式。
HTML结构兼容性问题，90%出在解析阶段——浏览器连你的标签都没认出来，后面样式和脚本全白搭。
怎么确认语义标签是否被正确解析
很多“布局错乱”其实不是CSS写错了，而是<header>、<main>这些标签压根没进DOM树。IE8–10、旧Android WebView会把不认识的标签当<span>处理，直接丢弃闭合逻辑。
- 打开DevTools Elements面板，手动展开DOM，看
<nav>等节点是否存在，有没有被自动包裹进<div> - 在Console执行：
document.querySelectorAll('header, main, nav, footer').length，返回0就说明未识别 - IE8及以下必须同时满足两个条件：引入
html5shiv+ 手动加CSS：header, nav, section, article, aside, footer { display: block; }
DOCTYPE前面有空格或BOM就直接掉进怪异模式
只要<!DOCTYPE html>前面多一个空格、换行、UTF-8 BOM或服务端模板注入的不可见字符，IE/Edge Legacy立刻切到Quirks模式——盒模型变IE5、float不触发BFC、vertical-align行为全乱。
- Chrome DevTools Elements顶部显示
Quirks？立刻查源码开头，用十六进制编辑器或file -i命令确认BOM - Node.js模板（如EJS、Pug）常在
<!DOCTYPE html>前插入空白行，需显式设置trim: true或用<%-语法 - PHP输出前不能有任何
echo、print或空白，否则BOM或空格会提前输出
用W3C Validator做静态结构校验
它不测渲染，但能揪出根本性结构错误：非法嵌套、自闭合标签误用、属性缺失——这些问题在Chrome里可能“看起来正常”，但在旧引擎里直接导致解析中断。
立即学习“前端免费学习笔记（深入）”；
- 访问
https://validator.w3.org/nu/，选“Validate by Direct Input”，粘贴完整HTML源码（确保第一行就是<!DOCTYPE html>） - 重点看
Element X is not allowed as child of element Y类报错，比如<div>直接包<h1>再包<p>在严格模式下可能被截断 - 警告（Warning）也要理：比如
Attribute "role" not allowed on element "div"，旧版JAWS或NVDA可能跳过该语义
CSS.supports()检测不到就别用现代布局
@supports不是可选功能，是安全护栏。Safari 15.4之前不支持CSS.supports('contain', 'layout')这种双参数写法，但CSS.supports('display: flex')可用——别混用，也别指望它兜住IE。
- 检测
grid要写成：CSS.supports('display', 'grid')，而不是CSS.supports('display: grid')（后者在旧Safari里返回false） - 检测
inset等逻辑属性时，先确认浏览器版本：if (CSS.supports('inset: 10px')) { ... } - IE完全不支持
@supports，所有现代CSS必须配降级方案，比如Flexbox+float双写，不能只靠@supports包裹
最容易被忽略的是：结构兼容性不等于“页面能打开”，而是“浏览器是否按你写的结构生成DOM”。一旦解析偏差，后续所有CSS和JS都在错误的树上运行——这点比任何样式补丁都关键。
