IE8不支持querySelector，需用getElementById等替代或加存在性判断；Safari 9–10 Flexbox需Autoprefixer补前缀；Firefox 58–59中fetch传FormData需避免手动headers；字体应优先用系统默认族名并配font-display: swap。
Chrome 正常但 IE 打不开？先查 document.querySelector 是否被误用
IE8 及更早版本根本不支持 document.querySelector，哪怕只在某个工具函数里悄悄调了一次，整个 JS 就会在 IE 中静默失败（控制台报 Object doesn't support property or method 'querySelector'）。这不是“样式没对齐”，是脚本直接中断。
- 检查所有 DOM 查询逻辑：用
document.getElementById或document.getElementsByTagName替代，或加一层存在性判断：if (document.querySelector) { ... } - 若项目必须用现代 API，引入
querySelector的 polyfill（如ie8.js），但注意它只补基础功能，不支持复杂选择器（如[data-id="123"]） - Vue/React 项目通常已内置兼容处理，但自写工具类、表单校验、动态插入 HTML 的逻辑仍可能裸用原生 API，这里最容易漏测
Flex 布局在 Safari 9–10 显示错乱？别直接写 display: flex
Safari 9–10 对 Flexbox 的实现基于旧版草案（2012 年 spec），flex: 1、align-items: center 行为和现代标准不一致，尤其嵌套 flex 容器时容易塌陷或溢出。
- 用 Autoprefixer 编译 CSS，确保输出包含
-webkit-box/-webkit-flex等前缀；单独写前缀无效，必须整套规则对齐 - 避免在 Safari 旧版中依赖
flex-wrap: wrap+min-width做响应式栅格，改用float或媒体查询 + 固定宽度 fallback - 测试时打开 Safari 开发者菜单 → “开发” → “进入响应式设计模式”，选 “iOS 9.3” 设备模拟，比单纯切 User-Agent 更可靠
fetch 请求在 Firefox 60 以下失败？不是 CORS 问题，是语法不支持
fetch 在 Firefox 60 才开始支持 AbortController，但更隐蔽的问题是：Firefox 58–59 不支持 fetch 的 body: FormData 自动设置 Content-Type，会发成 text/plain 导致后端解析失败。
- 手动设置头：
fetch(url, { method: 'POST', body: formData, headers: {} })不行；必须删掉headers，让浏览器自动设（或用new Headers()初始化空对象） - 需要取消请求？别用
AbortController，降级为XMLHttpRequest，或用setTimeout+ 标志位模拟取消 - Node.js 后端若用
multer，要确认是否开启preservePath: true，否则旧版 fetch 传的 FormData 字段名可能被截断
字体渲染差异大到像换了个网站？优先锁定 font-family 的 fallback 链
Windows 上 Chrome 渲染 font-family: "PingFang SC", "Helvetica Neue" 会跳过缺失字体直接回退到 serif，而 macOS 下能正确加载 PingFang。根本原因不是字体没装，是字体族名在不同系统注册名不同。
- 中文优先写系统默认字体名：
"-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif - 避免写绝对路径或自定义字体名（如
"MyFont-Regular"）而不配@font-face规则；未加载完成时，部分浏览器会显示空白或方块 - 用
font-display: swap控制自定义字体加载行为，但注意 Safari 10–13 不支持该属性，需配合local()和url()双声明
兼容性从来不是“加几个前缀就完事”，而是得知道哪个浏览器在哪个版本把哪条语法规则悄悄改了——这些细节藏在 release note 里，但暴露在用户点击按钮的那一刻。
