HTML兼容性问题由三件事决定：DOCTYPE是否顶格、语义标签是否被当块级元素处理、CSS/JS是否基于特性存在性做判断；DOCTYPE必须顶格且无BOM，否则触发Quirks Mode；IE8及以下需手动设置语义标签display:block；应使用normalize.css而非reset.css；JS须用API存在性检测而非UA判断。
HTML兼容性问题不是靠“加个polyfill就完事”解决的，而是由三件事决定：DOCTYPE是否顶格、语义标签是否被当块级元素处理、CSS/JS是否基于特性存在性做判断。
DOCTYPE必须顶格且无BOM，否则直接进怪异模式
这是所有兼容问题的开关。只要<!DOCTYPE html>前面有空格、注释、UTF-8 BOM字节，IE和旧Edge就会触发Quirks Mode，盒模型、浮动逻辑、document.body.scrollTop读取全错。
- 验证方式：打开 Chrome DevTools → Elements 面板顶部看渲染模式，显示
Standards才算成功；若显示Quirks，就得回查源码开头 - 特别注意 UTF-8 BOM：用 VS Code 或 Sublime 打开文件时，右下角检查编码是否为
UTF-8（非UTF-8 with BOM） - PHP模板常见坑：
<?php echo $title; ?>前若有空白或换行，也会污染首行
IE8及以下不识别<header>等语义标签，仅引入html5shiv不够
html5shiv 只让 IE 知道这些标签存在，但不会自动设display: block。结果是<nav>默认当 inline 渲染，布局直接塌陷。
- 必须手动加 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')手动创建——容易漏写、难维护，且没解决样式问题
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须用API存在性检测而非navigator.userAgent
UA 字符串极易伪造、过时、不可靠。比如某 Android WebView 声称是 Chrome，却缺失localStorage；或者新版 Safari 假装成旧版来绕过限制。
- 正确写法：
if ('fetch' in window) { /* 使用 fetch */ } else { /* 降级用 XMLHttpRequest */ } - 不要写
if (navigator.userAgent.indexOf('MSIE') !== -1)这类判断 - Modernizr 生成的类名（如
.flexbox/.no-flexbox）比 UA 更可靠，但需确保其脚本在 CSS 之前加载
真正卡住人的从来不是某个 polyfill 没加，而是 DOCTYPE 被 BOM 污染了、语义标签没设 display、或者 JS 里写了let却忘了 Babel 编译——这些点看似琐碎，但每一条都直接决定页面在 IE8 里是能用还是彻底白屏。
