DOCTYPE必须顶格写在第一行，否则IE和旧版Edge强制进入Quirks Mode，导致DOM解析异常、盒模型错乱、JS API失效；验证方式为检查document.compatMode是否为"CSS1Compat"。
DOCTYPE必须顶格写，否则直接进怪异模式
所有兼容问题的起点就在这里。只要前面有空格、BOM、注释或PHP输出的空白，IE和旧Edge就会触发Quirks Mode——这时<code>width、float、document.body.scrollTop全按老规则算，布局和JS行为彻底错乱。
验证方式很简单：Chrome DevTools Elements面板顶部显示“Standards”才算成功；显示“Quirks”就得立刻回查源码开头。
- VS Code右下角确认编码是
UTF-8 without BOM（不是“UTF-8”） - 删掉
前所有字符，包括<code><!-- 注释 -->、不可见BOM字节 - 别用HTML4那种过时声明，现代浏览器反而解析更不稳定
语义标签在IE8–11中需显式设display: block
<main></main>、<section></section>、<article></article>这些标签在IE9–11里默认仍是inline，不加样式就会塌陷布局、CSS选择器失效；IE8及以下连DOM节点都创建不出来。
光引html5shiv不够——它只让IE知道这些标签存在，但不会自动设display: block。
立即学习“前端免费学习笔记（深入）”；
- 必须手动加CSS规则：
main, section, article, aside, nav, header, footer { display: block; } - 条件加载更安全：
<!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script><![endif]--> - 如果目标用户基本不用IE（比如纯移动端或内网已淘汰IE），可跳过这步；但政企内网仍常见IE11，别假设“没人用”
CSS统一用normalize.css，禁用reset.css
不同浏览器对<h1></h1>的margin-top处理差异极大：Chrome是0.67em，Firefox是0.83em，IE6甚至用像素值。不统一就等于给每个浏览器发不同图纸。
reset.css把所有margin/padding归零，结果是你得重写大量基础样式；normalize.css则保留合理默认值（如表单控件尺寸、列表缩进逻辑），只修复已知跨浏览器bug。
-
<link rel="stylesheet" href="normalize.css">必须放在所有自定义CSS之前 - 务必加全局
box-sizing重置：* { box-sizing: border-box; }，否则IE宽高计算和现代浏览器差一个padding - 构建时集成
Autoprefixer，目标浏览器配置要精准，比如"supports": ["last 2 versions", "ie >= 11"]，避免为已淘汰版本冗余输出
JS API必须用存在性检测，禁用navigator.userAgent
UA字符串极易伪造、过时，且Chrome/Firefox已开始隐藏真实版本。直接调用fetch()或classList在IE11里会报undefined is not a function并中断执行。
正确检测方式是检查API是否存在：
if ('fetch' in window) { ... }if (document.body.classList) { ... }if ('localStorage' in window) { ... }
对关键API补polyfill：如Promise用promise-polyfill@8，Array.from用core-js/stable/array/from。别靠@supports兜底——IE11完全不支持@supports，得配合JS检测。
真正容易被忽略的是：这三件事——DOCTYPE顶格、语义标签display: block、API存在性检测——是所有补丁的根基。柱子歪了，补丁越多越容易崩。
