doctype必须顶格写，否则ie和旧版edge强制进入quirks mode，导致dom解析异常、样式错乱、api失效；html5语义标签需手动设display:block；结构错误比css问题更隐蔽，应优先验证html结构。
DOCTYPE 必须顶格写，否则直接进怪异模式
这是所有结构兼容问题的起点。只要 前面有空格、<code><!-- 注释 -->、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 脚本检查首行是否为
，比人工更可靠 - 别用
这类过时声明，现代浏览器反而解析更不稳定
HTML5 语义标签在 IE8–IE11 中默认是 inline
<header></header>、<nav></nav>、<main></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></main>在 IE11 中虽能被识别为元素，但若没设display: block，仍按 inline 渲染
DOM 解析差异比 CSS 更隐蔽，优先查结构而非样式
很多“样式不生效”其实是 DOM 根本没建出来。比如：<div><p>文本</p></div>
data- 前缀，在旧版 Safari 中会被忽略，导致 JS 读不到。- 用 W3C Markup Validation Service 验证 HTML 结构，不只看“通过”，要盯住 warning 级提示
- 在 IE11 DevTools 中用
console.dir(document.body)查实际 DOM，比看源码更真实 <table> 里没写 <code><tbody>，JS 操作 <code><tr> 时容易出错——即使浏览器自动补了，脚本行为也不一致<li>避免在 <code><span></span>里嵌套<div> 这类块级元素，IE 会丢弃或重排<h3>meta 标签和属性值写法影响早期浏览器行为</h3> <p><code><meta http-equiv="X-UA-Compatible" content="IE=edge">不是万能开关，它只对 IE8+ 生效，且依赖 DOCTYPE 正确；而属性值不带引号、大小写混用、布尔属性不赋值，都会在旧浏览器中引发不可预测行为。-
<input checked>在 XHTML 或严格模式下不合法，应写成<input checked>或<input checked> -
<img alt="描述">的alt属性不能省略，否则在 IE6–IE8 中可能触发 layout bug - 事件绑定名注意大小写：
onfocus是标准写法，onFocus在 IE 下可能失效 -
<select></select>的<option selected></option>必须赋值：<option selected></option>，否则 IE8 不识别
结构兼容性问题往往藏在最基础的地方：第一行、第一个标签、第一个属性值。改掉一个空格，比加十个 polyfill 更有效。
-
