Autoprefixer不会自动生效，必须确保CSS真实流经PostCSS处理链路；常见原因包括postcss.config.js未被加载、loader顺序错误（如postcss-loader未置于css-loader之后）、普通<style>块未启用PostCSS、browserslist配置不当或CSS语法超出支持范围。
Autoprefixer 不会自动生效，它必须被 PostCSS 正确加载，且你的 CSS 文件必须真实流经 PostCSS 处理链——绝大多数“没加前缀”的问题，根源都在这一环断了。
postcss.config.js 没被构建工具读取？先验证它是否真在运行
很多项目根目录放了 postcss.config.js，但构建时压根没加载它。Vite 5+ 默认启用 PostCSS，但如果你在 vite.config.js 中写了 css.postcss 字段，反而会屏蔽默认行为；Webpack 完全不认这个文件，必须手动配 postcss-loader；Vue CLI 默认集成，但只对 <style lang="postcss"> 生效，普通 <style> 块需确认 loader 链路里含 postcss-loader。
实操建议：
- 在
postcss.config.js第一行加require('xxx-missing-plugin')，启动或构建——不报错说明该文件根本没被读取 - Vite 要求配置文件必须在项目根目录；Webpack 要求
postcss-loader必须排在css-loader之后，且css-loader的importLoaders≥ 1，否则@import进来的 CSS 不进 PostCSS 流程 - 检查构建工具文档确认加载路径，别只凭文件存在就认为它在工作
browserslist 配置错误，autoprefixer 就白忙一场
Autoprefixer 完全按 browserslist 输出前缀，不是靠经验或模糊描述。“last 2 versions” 会强制给 Safari 12 加 -webkit-，但它早已原生支持 gap；“> 1%” 可能拉进大量 IE11 用户，生成一堆 -ms- 前缀，而你的项目根本不支持 IE。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 优先把
browserslist写在package.json里，避免.browserslistrc和 CI 环境不一致 - 线上项目推荐显式声明，例如：
"iOS >= 16.4"、"Safari >= 14.1"、"Chrome >= 90"，比模糊语法更可控 - 运行
npx browserslist查看当前配置实际匹配哪些浏览器版本；再跑npx autoprefixer --info看哪些属性会被处理——别只凭记忆写
CSS 写法超出 autoprefixer 支持范围，前缀自然不会加
Autoprefixer 只补前缀，不转译语法。它不会把 gap: 1rem 降级成 margin 模拟，也不会把 place-items: center 拆成 align-items + justify-items；反过来，IE11 的 display: -ms-grid 和现代 grid 差异极大，加了前缀也不等于能用。
常见错误现象：
-
aspect-ratio: 1/1没任何前缀 → 正常，caniuse 显示该属性无主流前缀需求（截至 2026 年 5 月） -
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 通常不处理运行时生成的内容；Bootstrap 的预编译 bootstrap.min.css 是纯 CSS，直接引入就绕过了整个 PostCSS 流程——autoprefixer 插件根本碰不到这些代码。
实操建议：
- Bootstrap 项目必须走源码编译：对 v4，用 Sass 编译入口
_bootstrap.scss；对 v5，用@import "bootstrap/scss/bootstrap" - Tailwind 项目别在
postcss.config.js里重复挂载autoprefixer，除非你明确禁用了它的内置前缀逻辑 - CSS-in-JS 场景下，前缀需交由库自身处理（如 Emotion 的
@emotion/babel-preset-css-prop），PostCSS 插件基本无效
最常被忽略的一点：Autoprefixer 的行为完全取决于 browserslist 匹配结果和 caniuse 数据快照，而不是你本地浏览器的版本或开发机上的 Chrome 版本。哪怕你在 Chrome 128 里测试正常，只要 browserslist 包含了需要前缀的旧内核，它就会加；反之，哪怕你写了 display: flex，如果目标浏览器全都原生支持，它一个前缀都不会加——这不是 bug，是设计使然。
