Autoprefixer仅按browserslist规则添加厂商前缀，不修复语法错误、不降级CSS特性（如aspect-ratio、place-items）、不处理运行时生成样式；其生效前提是PostCSS流程正确加载、配置精准覆盖目标浏览器且CSS源码经由该流程处理。
Autoprefixer 不是“修复”工具，它只按规则加前缀，不修正写法错误、不降级语法、也不处理运行时生成的 CSS。 大多数人以为装完就自动“修好”，结果发现 place-items 在 Safari 里不生效、aspect-ratio 完全没前缀、或者 IE11 里 grid 还是空白——这些都不是 Autoprefixer 失效，而是它压根没义务处理。
PostCSS 根本没跑？先验证配置是否被读取
很多项目有 postcss.config.js，但构建工具根本没加载它。Vite 5+ 默认启用 PostCSS，但如果你在 vite.config.js 里写了 css.postcss，反而可能覆盖默认行为；Webpack 则完全依赖你手动配 postcss-loader，且必须放在 css-loader 之后、importLoaders ≥ 1，否则 @import 的 CSS 不进流程。
实操建议：
- 在
postcss.config.js里写require('xxx-missing-plugin')，启动构建——不报错说明该文件根本没被读取 - Vite 要求
postcss.config.js必须在项目根目录；Vue CLI 默认集成，但只有<style lang="postcss">才走 PostCSS，普通<style>块需确认vue-style-loader+css-loader链路中是否含postcss-loader
browserslist 配置错，前缀就加得南辕北辙
Autoprefixer 完全按 browserslist 输出前缀，不是靠经验。“last 2 versions” 会强制给 Safari 12 加 -webkit- 前缀，而它早已原生支持 gap；“> 1%” 可能拉进大量 IE11 用户，导致生成一堆 -ms- 前缀，但你的项目根本不支持 IE。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 优先把
browserslist写在package.json里，避免多处维护；别用autoprefixer插件内的overrideBrowserslist参数 - 线上项目推荐显式声明，例如：
"iOS >= 13"、"Safari >= 14.1"、"Chrome >= 90"，比模糊语法更可控 - 运行
npx browserslist查看当前配置实际匹配哪些浏览器版本；再跑npx autoprefixer --info看哪些属性会被处理——别只凭记忆写 CSS
CSS 写法太新 or 太旧，Autoprefixer 直接跳过
Autoprefixer 只补前缀，不转译语法。它不会把 gap: 1rem 降级成 margin 模拟，也不会把 place-items: center 拆成 align-items + justify-items；反过来，IE11 的 display: -ms-grid 和现代 grid 差异极大，加了前缀也不等于能用。
常见错误现象：
- 写了
aspect-ratio: 1/1没任何前缀 → 正常，caniuse 显示该属性无主流前缀需求 - 写了
place-items: center，但 Safari 14.1 下不生效 → 不是前缀问题，是该属性在 Safari 中需align-items+justify-items拆解 - 启用了
grid-template-areas，IE11 完全空白 → Autoprefixer 确实加了-ms-grid，但 IE 的 Grid 实现和现代标准差异极大，不能指望自动兼容
和 Tailwind 或 CSS-in-JS 混用时，前缀容易被绕过
Tailwind 默认已内置 Autoprefixer 逻辑，再额外配一遍可能冲突；Emotion、Styled Components 等 CSS-in-JS 库若用 css 函数动态生成样式，PostCSS 通常不处理运行时生成的内容。
实操建议：
- 确认你写的 CSS 是否真经过 PostCSS 流程：如果是
@import 'xxx.css'，确保那个.css文件本身也由构建工具处理（而非直接引用已发布的静态资源） - 用 Tailwind 时，不要在
postcss.config.js里重复加autoprefixer，除非你明确需要覆盖其内部行为 - 对 CSS-in-JS 场景，前缀需由库自身支持（如 Emotion 的
babel-plugin-emotion）或改用构建时预编译方案（如 Linaria）
最常被忽略的一点：Autoprefixer 不是万能胶水，它只做一件事——查 Can I Use 数据库，按你写的 browserslist 加前缀。能不能用，取决于你写的属性本身是否被目标浏览器支持，以及你有没有把真实 CSS 送进它的处理管道。
