浏览器自动纠错导致DOM与源码不一致，如<div><p>内容</div></p>被修正为<div><p>内容</p></div>外多出空<p>，实际结构以Elements面板为准；W3C校验器可精准定位未闭合、非法嵌套等原始错误。
浏览器自动纠错后 DOM 结构和源码不一致
你写的 <div><p>内容</div></p>，浏览器不会报错，但会按自己的规则“修复”：把 </div> 当作 <p> 的闭合，再把 </p> 当作孤立标签忽略——最终 DOM 树里可能多出一个空 <p>，而原本该在 <div> 里的内容跑到了外面。这不是渲染“有点歪”，是整个文档流被重排了。
关键判断依据不是源码，而是开发者工具的 Elements 面板。这里显示的是浏览器实际构建出的 DOM，所有黄色警告图标、意外缩进、子节点突兀出现，都是纠错痕迹。
- 重点关注
<table>、<ul>、<ol>内部——这些标签解析器最敏感，一个</li>漏写，后面整块列表都可能被吞进<td>或变成兄弟节点 -
<p>不能包<div>，<h1>～<h6>不能包任何块级元素，这是 HTML5 规范硬限制，不是“能显示就行” - 用 W3C Markup Validation Service 粘贴代码，它会逐行标出
Unclosed element div、End tag for element p omitted这类原始错误点，比肉眼排查快得多
自闭合标签写成双标签引发嵌套位移
<img>、<input>、<br> 是 void 元素，在 HTML5 中禁止写 <img src="x.jpg"></img>。浏览器会把它解析为两个标签：第一个 <img> 被忽略（因为没属性），第二个 </img> 被当作普通开始标签处理，后续所有内容都会被当成它的子节点，整体向右缩进一级。
这种错位在 Elements 面板里非常明显：你看到的 DOM 层级比源码深一层，且顶部出现一个无名的 <img> 节点（实际是误解析的结束标签）。
立即学习“前端免费学习笔记（深入）”；
- 检查所有
<img>、<input>、<meta>、<link>是否带了多余的</xxx> - 编辑器里开 HTML 校验插件（如 VS Code 的 Auto Close Tag + HTMLHint），能实时拦截这类写法
- 注意
<script>和<style>不是 void 元素，必须成对出现；漏写</script>会导致后面所有 HTML 被当作文本节点
语义标签未声明 display 导致 IE11 及旧版 Safari 布局塌陷
<header>、<nav>、<main>、<footer> 在 IE11 及更早版本中默认是 display: inline，不占块级空间。如果你没做兼容处理，导航栏会塌成一行、页脚直接叠在内容上——这看起来像 CSS 错误，实则是 HTML 结构在旧内核里根本没被识别为块容器。
html5shiv 只解决标签识别问题，不注入样式。光引入 <script src="html5shiv.min.js"></script> 不够，必须配 CSS：
header, nav, section, article, aside, footer {
display: block;
}
- 这段 CSS 必须放在 html5shiv 之后 加载，否则 IE11 仍按 inline 渲染
- 不要只写
footer { display: block; }——所有新增语义标签都要显式声明，漏一个就可能连锁错位 - Chrome/Safari 新版本虽默认支持，但若页面混用框架（如 Bootstrap），其 CSS 可能覆盖默认
display，仍需检查 computed 样式中的最终值
未闭合的 <div> 引发全局布局崩塌
一个漏掉的 </div> 往往不是局部问题。比如在 <section> 里少闭合一个 <div>，浏览器会一直向上找可闭合的父容器，最后可能把整个 <body> 内容都塞进这个 <div> 里，导致 CSS 选择器失效、JS document.querySelector('.footer') 找不到目标——因为你写的 <footer> 实际在那个未闭合 <div> 的内部，层级完全变了。
这种错误在 Flexbox 或 Grid 布局中尤其致命：父容器设了 display: grid，但子元素因 DOM 错位被包进别的容器，就彻底脱离网格上下文。
- 用编辑器折叠功能逐层收起
<div>，看是否某一层无法完整折叠（说明缺闭合） - Elements 面板里搜索
<div，数一下开启和闭合数量是否相等；注意区分<div class="...">和<div>，它们都算一个开启标签 - 复杂页面建议用 Prettier 自动格式化 + ESLint-plugin-html 校验，比人工盯源码可靠
真正难排查的从来不是单个标签写错，而是纠错后的 DOM 结构偏离预期又不报错。Elements 面板看到的，才是你实际在操作的 DOM；W3C 校验器标出的，才是源头错误位置。别信“能显示就行”，浏览器纠错没有标准答案。
