DOCTYPE必须顶格写，否则IE和旧版Edge强制进入Quirks Mode，导致DOM解析异常、样式错乱、API失效；HTML5语义标签需手动设display:block；结构错误比CSS问题更隐蔽，应优先验证HTML结构。
DOCTYPE 必须顶格写，否则直接进怪异模式
这是所有结构兼容问题的起点。只要 <!DOCTYPE html> 前面有空格、<!-- 注释 -->、PHP 输出的空白，甚至 UTF-8 BOM 字节，IE 和旧版 Edge 就会强制进入 Quirks Mode。
后果不是“样式没生效”，而是整个 DOM 解析逻辑翻车：document.body.scrollTop 读不准、浮动塌陷、width 按 IE 盒模型算、querySelector('header') 返回 null 或错位节点。
- 验证方式：Chrome DevTools → Elements 面板顶部看渲染模式，显示
Standards才算成功；显示Quirks就得立刻查源码第一行 - VS Code 右下角确认编码是
UTF-8 without BOM（不是UTF-8） - 构建阶段加 CI 脚本检查首行是否为
<!DOCTYPE html>，比人工更可靠 - 别用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">这类过时声明，现代浏览器反而解析更不稳定
HTML5 语义标签在 IE8–IE11 中默认是 inline
<header>、<nav>、<main> 这些标签在 IE8–IE11 中不自动当块级元素，哪怕引入了 html5shiv，也不会自动加 display: block。
结果就是 margin 失效、高度塌陷、querySelector('header') 在 IE8 下返回 null，在 IE9+ 下返回但布局错乱。
立即学习“前端免费学习笔记（深入）”；
- 必须手动补这条 CSS：
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } - 条件加载更稳妥：
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script><![endif]--> - 不用
document.createElement('header')手动创建——漏一个就全崩，且不解决样式问题 - 注意：
<main>在 IE11 中虽能被识别为元素，但若没设display: block，仍按 inline 渲染
DOM 解析差异比 CSS 更隐蔽，优先查结构而非样式
很多“样式不生效”其实是 DOM 根本没建出来。比如：<div><p>文本</div></p> 这种错误闭合，在 Chrome/Firefox 中会被自动修复，但在 IE 中可能直接截断后续节点；又比如自定义属性没加 data- 前缀，在旧版 Safari 中会被忽略，导致 JS 读不到。
- 用 W3C Markup Validation Service 验证 HTML 结构，不只看“通过”，要盯住 warning 级提示
- 在 IE11 DevTools 中用
console.dir(document.body)查实际 DOM，比看源码更真实 -
<table>里没写<tbody>，JS 操作<tr>时容易出错——即使浏览器自动补了，脚本行为也不一致 - 避免在
<span>里嵌套<div>这类块级元素，IE 会丢弃或重排
meta 标签和属性值写法影响早期浏览器行为
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 不是万能开关，它只对 IE8+ 生效，且依赖 DOCTYPE 正确；而属性值不带引号、大小写混用、布尔属性不赋值，都会在旧浏览器中引发不可预测行为。
-
<input checked>在 XHTML 或严格模式下不合法，应写成<input checked="checked">或<input checked=""> -
<img alt="描述">的alt属性不能省略，否则在 IE6–IE8 中可能触发 layout bug - 事件绑定名注意大小写：
onfocus是标准写法，onFocus在 IE 下可能失效 -
<select>的<option selected>必须赋值：<option selected="selected">，否则 IE8 不识别
结构兼容性问题往往藏在最基础的地方：第一行、第一个标签、第一个属性值。改掉一个空格，比加十个 polyfill 更有效。
