autoprefixer不会自动加前缀，仅当css为标准语法且目标浏览器需前缀时才补全；常见失效原因包括browserslist未包含ie11、css未进入postcss流程、误以为它能降级语法（如grid转-ms-grid）。
Autoprefixer 不会自动加前缀，它只在你写的 CSS 是标准语法、且目标浏览器支持该特性但需要前缀时，才补上对应前缀。写错 browserslist、CSS 没进 PostCSS 流程、或误以为它能降级语法（比如把 grid 转成 -ms-grid），是 90% “没生效”问题的根源。
为什么写了 display: flex 却没生成 -ms-flexbox？
Autoprefixer 对 Flexbox 的前缀生成是条件触发的，不是“写了就加”。必须同时满足：
-
browserslist明确包含 IE11，例如["ie >= 11"]或["IE 11"]；"last 2 versions"默认不含 IE，不会触发 -ms- 前缀 - Autoprefixer ≥ v10 时，需显式启用老规范：
require('autoprefixer')({ flexbox: '2009' }) - CSS 中不能已存在手动前缀，比如
display: -webkit-flex—— 一旦出现，整条声明会被跳过 - 确保构建工具真把这行 CSS 送进了 PostCSS 流程（Vite 里检查
vite.config.js是否覆盖了默认css.postcss）
Grid 在 IE10/11 里白屏，Autoprefixer 能修吗？
不能。IE10/11 根本无法解析 display: grid，整个声明被浏览器忽略，不是样式失效。Autoprefixer 只补前缀，不降级语法。
真实兼容方案只有手写双版本：
display: -ms-grid; display: grid;-
-ms-grid-columns: 1fr 2fr; grid-template-columns: 1fr 2fr;（注意 IE 实际支持fr，但部分旧系统有 bug，建议用auto或固定值兜底） -
grid-gap在 Safari ≤10.1 也不被识别，Autoprefixer 默认不输出-webkit-grid-gap；即使开启grid: true，也只会展开为grid-row-gap/grid-column-gap，仍无-webkit-前缀
如何验证 Autoprefixer 真正在工作？
别靠猜，分两步验证：
- 运行
npx browserslist，确认当前配置实际匹配哪些浏览器版本（比如是否真含 IE11） - 再跑
npx autoprefixer --info，看哪些属性在当前browserslist下会被加前缀（例如display: flex是否列在 Flexbox 条目下） - 最关键的一步：找一个明确应被处理的规则（如
::placeholder），在源 CSS 里写它，然后检查构建产物中是否出现了::-moz-placeholder等变体 —— 如果没有，说明 CSS 根本没进 PostCSS 流程
Vue / React 项目里前缀没加，大概率不是 Autoprefixer 的锅
绝大多数情况是 CSS 没走 PostCSS 流程：
- Vite 项目：检查
vite.config.js中是否误配了css.postcss，导致覆盖了默认 PostCSS 配置 - Vue CLI 项目：确认未设置
css.requireModuleExtension: false，否则非.module.css文件会绕过 PostCSS - CRA eject 后：Webpack 配置中
postcss-loader的postcssOptions.plugins必须显式包含autoprefixer() -
public/目录下的 CSS 文件用<link>引入？它完全不走构建流程，Autoprefixer 一概不管
最常被忽略的一点：Autoprefixer 只处理标准 CSS 字符串，它对 SCSS/Sass 编译后的输出起作用，而不是对 .scss 源文件本身。如果你用了 @mixin 手动写前缀，那和 Autoprefixer 完全无关——它既不读也不改你的 mixin，只处理最终编译出的 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
