elements面板中灰色、斜体、无缩进或带删除线的节点即被浏览器静默修正的非法结构，如xxx中被移出并左对齐；w3c validator报stray end tag或element x not allowed as child of y必须修复，否则旧浏览器、读屏器、seo失效。
只靠页面能渲染就认为标签合法，是跨浏览器结构不一致的最主要诱因。浏览器容错机制差异太大，Chrome 自动修复的嵌套错误，IE 或旧 Safari 可能直接丢弃节点甚至中断解析。
Chrome DevTools Elements 面板里怎么一眼看出非法结构
Elements 面板显示的是实际 DOM 树，不是源码 —— 灰色、斜体、带删除线的节点就是被浏览器静默修正过的非法结构：
-
<p></p> <div>xxx</div>：Chrome 会把<div> 移出 <code><p></p>，该<div> 在面板中突然左对齐、无缩进 <li> <code><code><script></script>：没加type或defer，节点标灰并提示 “HTML validation warning”（需在 DevTools Settings → Console → Verbose 开启） - 右键节点 → “Break on” → “Attribute modifications”，可捕获 JS 动态破坏结构的行为
- Elements 默认折叠空文本节点和注释，手动展开才能看清嵌套是否连贯
-
Stray end tag：比如多写了
W3C Validator 报 Stray end tag 或 Element X not allowed as child of element Y 必须修
这类 Error 不影响当前 Chrome 渲染，但意味着结构已违反 HTML5 规范，旧浏览器、屏幕阅读器、SEO 工具会直接失效：
