DOCTYPE必须顶格写，否则触发怪异模式导致DOM解析异常；HTML5语义标签需手动设display:block；normalize.css须置于自定义CSS前并配合box-sizing:border-box。
DOCTYPE 必须顶格写，否则直接进怪异模式
这是所有结构兼容问题的开关。只要 <!DOCTYPE html> 前面有空格、<!-- 注释 -->、PHP 输出的空白，甚至 UTF-8 BOM 字节，IE 和旧版 Edge 就会强制进入 Quirks Mode。此时 document.body.scrollTop 读不准、浮动塌陷、width 解析逻辑完全不同——不是样式没生效，是整个 DOM 解析树都变了。
验证方式很简单：打开 Chrome DevTools → Elements 面板顶部看渲染模式，显示 Standards 才算成功；显示 Quirks 就得立刻检查 HTML 源码第一行。
- 用 VS Code 打开文件，右下角确认编码是
UTF-8 without BOM（不是UTF-8） - 构建阶段加 CI 脚本检查首行是否为
<!DOCTYPE html>，比人工更可靠 - 别用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">这类过时声明，现代浏览器反而解析更不稳定
HTML5 语义标签在 IE8–IE11 中不自动当块级元素
<header>、<nav>、<main> 这些标签在 IE8–IE11 中默认是 inline，哪怕引入了 html5shiv，也不会自动加 display: block。结果就是 margin 失效、高度塌陷、querySelector('header') 返回 null（IE8 及以下）或返回但无法正确布局（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')手动创建——漏写一个就全崩，且不解决样式问题 - 如果目标环境已无 IE8–IE10，可跳过
html5shiv，但 IE11 仍需上述 CSS 规则 -
<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 树是否和预期一致，别只信 Elements 面板的渲染结果 - 避免在
<table>内直接放<div>—— IE 对表格模型的容错极低，容易触发隐式闭合
normalize.css 必须放在所有自定义 CSS 之前
不同浏览器对 <h1> 的 margin-top 默认值不同（Chrome 是 0.67em，Firefox 是 0.83em），对 <button> 的边框、内边距、字体继承也各有规则。不统一就等于给每个浏览器发不同图纸。
normalize.css 不是清零，而是保留合理默认值并修复已知 bug；reset.css 把所有 margin/padding 归零，反而要重写大量基础样式。
-
<link rel="stylesheet" href="normalize.css">必须出现在所有自定义 CSS 之前 - 务必加全局
* { box-sizing: border-box; }，否则 IE 计算宽高时会把padding算进width，现代浏览器不会 - 别用
all: unset或all: revert—— Safari 目前不支持，会直接忽略整条规则
结构兼容性最易被忽略的点在于：它不报错，也不显红，只是 DOM 节点位置偏了、尺寸小了、事件绑不上。查兼容问题时，先看 document.body.children 有多少个节点，再比对 Chrome 和 IE11 的输出，比盯着样式面板有效得多。
