html结构被浏览器静默重排是像素级还原失败主因：p内嵌div、ul内嵌div等非法嵌套触发自动修复，导致dom与源码不一致，devtools仅显示修正后结构，w3c validator可捕获但需配合puppeteer获取最终dom校验。
像素级还原失败，八成不是 CSS 写错了，而是 HTML 结构本身被浏览器悄悄重排过——p里塞div、ul里包div这类写法，W3C 会报错，但你 DevTools 里根本看不到原始结构。
W3C Validator 能抓到但 DevTools 看不见的嵌套错误
浏览器对非法嵌套会自动修复，比如<p></p>
<div>content</div>
<p></p>
<div>content</div>。DevTools Elements 面板只显示修正后 DOM，你写的p > div选择器自然失效，排查时容易卡在 specificity 或继承链上。
-
<p></p>只允许 phrasing content：<span></span>、<strong></strong>、纯文本，禁止<div>、<code><h2></h2>、<ul></ul> -
<ul></ul>和<ol></ol>的直接子节点只能是<li>；<ul><div></div></ul>会导致div被踢出列表，变成兄弟节点 <table>必须有<code><tbody>或<code><thead>/<code><tfoot>；<code><tr>不能直接放在<code><table>下 <h3>主内容区嵌套超过三层就该重构</h3> <p>从<code><main></main>开始往下，连续<section></section>/<div>包裹超过三层，不仅影响首屏性能（低端安卓机实测延迟 20–50ms），还会导致 JS <code>querySelector找不到节点、屏幕阅读器跳过内容。- 打开 Chrome DevTools → Elements 面板，悬停节点看右上角 Path：如果出现类似
body > div > div > div > main > article > section > p，就是明确信号 - 用语义标签替代冗余
div：<nav></nav>包导航、<section></section>分主题区块、<aside></aside>放辅助信息，而不是靠 class 命名模拟结构 - 纯样式占位的
div（比如只为了加 margin）应删除，改用 CSS 的gap、padding或伪元素实现
CI/CD 中必须跑预渲染后的 W3C 校验
静态扫描工具（如 cheerio）对 SPA 页面基本无效——React/Vue 动态插入的
<header></header>、异步加载的<meta>标签，它根本看不到。W3C Validator 默认解析静态 HTML，也会漏掉 JS 渲染内容。- 实操路径：用 Puppeteer 或 Playwright 启动无头浏览器 → 等待
networkidle0→ 调用page.content()获取最终 DOM → 提交给 W3C Validator API - 调用 API 时必须指定
parser=html5，否则<svg><foreignobject></foreignobject></svg>会被判非法 - 含中文页面必须带
charset=utf-8请求头，否则<meta charset="utf-8">会被 validator 忽略，误报编码错误
表单场景下 fieldset 嵌套的替代方案
嵌套
<fieldset></fieldset>会导致屏幕阅读器跳过中间<legend></legend>、JSfieldset.elements漏字段、禁用状态不级联，且 Safari 和 Chrome 焦点流处理不一致。- 视觉缩进用 CSS Grid/Flex 控制，语义靠
aria-describedby关联上下文，例如“国际收货信息”<fieldset aria-describedby="international-hint"></fieldset> - 强逻辑分支（如支付方式）改用
<input type="radio">组 + JS 控制子表单显隐，每组保持独立语义单元 - 动态隐藏字段优先用
hidden属性，而非display: none：hidden让元素彻底退出 form 提交和验证流程，display: none仍会被序列化
真正卡住像素级还原的，往往不是某个 CSS 属性没写对，而是你写的 HTML 在浏览器里根本没按你设想的方式存在过——结构校验不是上线前的收尾动作，而是切图开始前就必须确认的底线。
- 打开 Chrome DevTools → Elements 面板，悬停节点看右上角 Path：如果出现类似
