最常需加前缀的属性是 transform、flex、backdrop-filter；transform 需 -webkit-transform（iOS Safari ≤15.6 等），flex 在 IE10 需 -ms- 前缀，backdrop-filter 在 Safari 9–15.6 需 -webkit-，而 grid 基本无需前缀。
哪些 CSS 属性最常需要加前缀
不是所有新特性都需要前缀，但像 transform、transition、flex、grid、filter、backdrop-filter 这些在旧版 Chrome、Safari、Firefox 中确实容易出兼容问题。特别是 flex 的老语法（display: -webkit-box）和新语法混用时，IE10/11 会直接忽略整个声明块。
常见错误现象：样式在 Chrome 看着正常，Safari 里布局错乱，或者 Firefox 下动画不触发——大概率是漏了 -webkit- 或 -moz- 前缀，或者用了已废弃的老前缀（比如 -ms- 用于 transform 在 Edge 16+ 就不再需要）。
-
transform：必须加-webkit-transform（iOS Safari ≤15.6、Android Browser ≤4.4） -
flex：IE10 需要-ms-flexbox和-ms-flex-align，不能只靠现代语法 -
backdrop-filter：Safari 9–15.6 需-webkit-backdrop-filter，Chrome/Firefox 原生支持但版本较新 - 避免给
grid加前缀：CSS Grid 在主流浏览器中基本无需前缀（IE 用的是完全不同的-ms-grid语法，且不兼容现代写法）
autoprefixer 是怎么工作的，为什么不能全靠它
autoprefixer 本身不“猜”你用什么浏览器，它依赖 browserslist 配置决定加哪些前缀。如果你的项目没配 browserslist，或者配成 last 2 versions，它可能漏掉 iOS Safari 14.5 这类仍有 3% 市场份额但不算“last”的版本。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
package.json里明确写："browserslist": ["iOS >= 12", "Chrome >= 65", "Firefox >= 60"] - 用
npx autoprefixer --info检查当前配置实际覆盖哪些版本 - 不要把
autoprefixer当黑盒——它不会修复语法错误，比如把gap: 1rem加到 IE11 上（IE11 根本不支持gap），它只会沉默跳过 - 检查生成后的 CSS，确认关键属性确实被补上前缀，而不是因为源码写法不标准（比如写了
display: flex却没写flex-direction）导致整条规则被丢弃
遇到“加了前缀还是不生效”该怎么排查
前缀只是表象，真正卡住的往往是更底层的渲染限制或语法冲突。比如 -webkit-backdrop-filter 在 iOS Safari 中开启需要同时满足三个条件：元素有背景色（哪怕是 background-color: transparent）、父容器没有 overflow: hidden、且不能是 position: fixed 的子元素。
