HTML跨浏览器适配靠三件确定性动作：DOCTYPE顶格声明、normalize.css统一默认样式、用特性检测而非UA判断JS能力；漏掉任何一件，IE或旧Safari中CSS和JS均可能失效。
直接说结论：HTML跨浏览器适配不是靠“加一堆补丁”实现的，而是靠三件确定性动作——DOCTYPE顶格声明、normalize.css统一默认样式、用特性检测而非UA判断JS能力。漏掉任何一件，后续所有CSS和JS都可能在IE或旧Safari里失效。
DOCTYPE必须顶格写，且不能有BOM或空格
这是所有兼容问题的起点。一旦触发怪异模式（Quirks Mode），IE和旧Edge会用完全不同的盒模型解析页面，width、float、font-size全乱套。
必须独占第一行，前面不能有任何字符——包括<code><!-- 注释 -->、PHP输出的空白、甚至UTF-8 BOM字节- 用VS Code打开文件，右下角确认编码是
UTF-8 without BOM；BOM会导致IE/Edge直接忽略DOCTYPE - 在Chrome DevTools的Elements面板顶部看渲染模式，显示
Standards才算成功；若显示Quirks，就得回查HTML源码开头
HTML5语义标签在IE8–10中需手动设display: block
像<header>、<nav>、<main>这些标签，在IE8及以下默认是inline，不显式声明就会塌陷布局、CSS选择器失效。
- 仅引入
html5shiv不够：它只让IE知道这些标签存在，但不会自动设display: block - 必须加这段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]-->
CSS新特性别硬写前缀，用@supports或构建工具兜底
手动加-webkit-、-ms-前缀既容易漏，又污染代码。现代项目应靠自动化或特性检测控制降级路径。
立即学习“前端免费学习笔记（深入）”；
-
@supports (display: grid)比UA判断更可靠，但注意IE11完全不支持@supports，需配合JS检测 - Flexbox在旧Safari（iOS 8–9.3）中
flex-wrap: wrap和align-content行为不一致，建议用display: -webkit-box作fallback - 构建时集成
Autoprefixer，目标浏览器配置要精准——比如"supports": ["last 2 versions", "ie >= 11"]，避免为已淘汰版本冗余输出
JS API必须用存在性检测，禁用navigator.userAgent
UA字符串极易伪造、过时，且Chrome/Firefox已开始隐藏真实版本。直接调用fetch()或classList在IE11里会报undefined is not a function并中断执行。
- 正确检测方式：
if ('fetch' in window) { ... }或if (document.body.classList) { ... } - 对关键API补polyfill：如
Promise用promise-polyfill@8，Array.from用core-js/stable/array/from - 避免在构建产物中混入ES6+语法；Babel需配置
targets: { ie: "11" }，否则const、箭头函数会在IE里直接报错
最常被忽略的点是：normalize.css必须放在所有自定义CSS之前，且要配* { box-sizing: border-box }全局重置——否则IE的宽高计算和Chrome差一个padding，布局就偏了。这不是“样式细节”，是盒模型底层差异。
