Autoprefixer不生效的首要原因是PostCSS未运行，需通过require('xxx-missing-plugin')验证postcss.config.js是否被读取，并确认构建工具链（如Vite、Webpack、Vue CLI）正确加载PostCSS。
PostCSS根本没运行？先确认配置文件是否被读取
Autoprefixer不会自动生效，它必须依赖PostCSS实际执行处理流程。很多项目根目录放了postcss.config.js，但构建工具压根没加载它——这是“没加前缀”最常见原因。
实操建议：
- 在
postcss.config.js里加一行require('xxx-missing-plugin')，然后启动开发服务器或执行构建；如果不报错，说明该文件完全没被读取 - Vite 5+ 默认启用PostCSS，但若你在
vite.config.js中写了css.postcss字段，会覆盖默认行为，反而导致PostCSS失效 - Webpack不认
postcss.config.js，必须手动配置postcss-loader，且要确保它排在css-loader之后、且css-loader的importLoaders≥ 1，否则@import进来的CSS不会进PostCSS流程 - Vue CLI项目中，普通
块默认不走PostCSS；只有才触发，或需确认vue-style-loader→css-loader→postcss-loader链路完整
browserslist配置错误，前缀就加得毫无意义
Autoprefixer严格按browserslist查Can I Use数据库决定加不加前缀。“last 2 versions”可能给Safari 12加-webkit-，但它早已原生支持gap；“> 1%”可能拉进大量IE11用户，生成一堆-ms-前缀，而你的项目根本不支持IE。
实操建议：
- 优先把
browserslist写在package.json里，避免.browserslistrc、CI配置、插件参数多处不一致 - 禁用
autoprefixer插件内的overrideBrowserslist参数（新版已弃用），改用统一的browserslist字段 - 线上项目推荐显式声明，例如：
"iOS >= 16.4"、"Safari >= 17.5"、"Chrome >= 95"，比模糊语法更可控 - 运行
npx browserslist看当前配置实际匹配哪些浏览器版本；再跑npx autoprefixer --info确认display: flex、backdrop-filter等关键属性是否在列表中
CSS写法超出Autoprefixer支持范围，前缀自然不会加
Autoprefixer只补前缀，不转译语法。它不会把gap: 1rem降级成margin模拟，也不会把place-items: center拆成align-items+justify-items；反过来，IE11的display: -ms-grid和现代Grid差异极大，加了前缀也不等于能用。
常见错误现象：
-
aspect-ratio: 1/1没任何前缀 → 正常，caniuse显示该属性无主流前缀需求（截至2026年10月） -
place-items: center在Safari 14.1下不生效 → 不是前缀问题，是该属性在Safari中需align-items+justify-items组合才能工作 -
backdrop-filter: blur(4px)在iOS 15.4+才稳定支持-webkit-backdrop-filter，但caniuse标记不稳定 → 需在browserslist中显式写"ios_saf >= 15.4" -
vh单位在iOS Safari地址栏展开/收起时被压缩 → Autoprefixer完全不动单位，得用JS注入--vh并动态更新
和Tailwind或CSS-in-JS混用时，前缀容易被绕过
Tailwind默认已内置Autoprefixer逻辑，额外配一遍可能冲突；Emotion、Styled Components等CSS-in-JS库若用css函数，且未启用PostCSS插件（如@emotion/babel-plugin配合postcss），样式根本不会进PostCSS流程。
实操建议：
- 用Tailwind时，别在
postcss.config.js里重复引入autoprefixer，除非你明确需要覆盖其内置行为 - Emotion项目中，确保
@emotion/react+@emotion/babel-plugin+postcss三者协同；否则css`display: flex`不会被处理 - 生产构建后前缀消失？大概率是
cssnano在压缩时把前缀当冗余删掉了——检查它是否启用了内置autoprefixer，并禁用或对齐browserslist - 清理构建缓存：Vite用
--force，Webpack删node_modules/.cache，否则旧缓存可能掩盖配置变更
复杂点往往不在插件本身，而在构建链路中某个环节静默跳过PostCSS——比如一个@import语句、一个loader顺序、一次缓存复用，都可能让CSS彻底绕过Autoprefixer。验证方式永远是：改配置 → 看npx browserslist输出 → 故意写个已知该加前缀的属性（如display: flex）→ 检查最终CSS里有没有-webkit-box。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
