HTML兼容问题由三件事决定：DOCTYPE是否顶格、语义标签是否被当块级元素处理、CSS/JS是否基于特性存在性做判断；DOCTYPE必须顶格且无BOM，否则触发怪异模式；IE8–IE11需手动设语义标签display:block；应使用normalize.css而非reset.css；JS须用API存在性检测而非UA判断。
HTML兼容问题不是靠“加个polyfill就完事”解决的，而是由三件事决定：DOCTYPE是否顶格、语义标签是否被当块级元素处理、CSS/JS是否基于特性存在性做判断。其他所有补丁都建立在这三根柱子上——柱子歪了，补丁越多越容易崩。
DOCTYPE必须顶格且无BOM，否则直接进怪异模式
这是所有兼容问题的开关。只要DOCTYPE前面有空格、注释、UTF-8 BOM字节，IE和旧Edge就会触发Quirks Mode，盒模型、浮动逻辑、document.body.scrollTop读取全错。
- 验证方式：Chrome DevTools Elements面板顶部显示“Standards”才算成功；显示“Quirks”就得回查源码开头
- VS Code右下角确认编码是
UTF-8 without BOM（不是UTF-8） - 删掉
<!DOCTYPE html>前所有字符，包括<!-- 注释 -->、PHP输出的空白、甚至不可见的BOM - 别用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">这类过时声明，现代浏览器反而解析更不稳定
IE8–IE11不识别<main>等语义标签，光引html5shiv不够
html5shiv只让IE知道这些标签存在，但不会自动设display: block。IE9–11中<section>仍是inline，布局直接塌陷；IE8及以下连DOM节点都创建不出来。
- 必须手动加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更实用
Chrome里<h1>的margin-top是0.67em，Firefox是0.83em，IE6甚至用像素值。不统一就等于给每个浏览器发不同图纸。
立即学习“前端免费学习笔记（深入）”；
- 别用Eric Meyer的
reset.css：它把所有margin/padding归零，反而要重写大量基础样式 - 用
normalize.css：保留合理的默认值（如表单控件尺寸、列表缩进逻辑），只修复已知跨浏览器bug -
<link rel="stylesheet" href="normalize.css">必须放在所有自定义CSS之前 - 务必加全局
box-sizing重置：* { box-sizing: border-box; }，否则IE宽高计算和现代浏览器差一个padding
JS不能靠navigator.userAgent判断，要用'localStorage' in window这类存在性检测
UA字符串极易伪造、版本号模糊、移动端WebView UA混乱。真正可靠的是检测API是否存在——比如@supports (display: grid)在IE11里根本不支持该语法，整段CSS会被跳过。
- 关键布局先写降级方案：
.container { display: flex; } @supports (display: grid) { .container { display: grid; } } - JS中检测API存在性：
if ('IntersectionObserver' in window) { /* 用原生 */ } else { /* 加载polyfill或fallback */ } - 构建配置须精准覆盖目标浏览器：比如Babel
targets设为ie 11，而不是笼统写last 2 versions
最容易被忽略的是DOCTYPE和BOM的组合问题——很多团队在CI里加了html-validate检查DOCTYPE位置，却没校验BOM是否存在。一个隐藏字节就能让整个兼容策略失效。
