Autoprefixer仅对目标浏览器支持但需前缀的标准CSS特性自动添加前缀，不降级语法（如grid/gap）、不处理未支持特性，且需browserslist明确包含旧浏览器并正确配置插件选项（如flexbox: '2009'）才能生成对应前缀。
Autoprefixer 不会自动把 display: grid 改成 display: -ms-grid，也不会把 gap 转成 -webkit-grid-gap；它只在你写了标准语法的前提下补前缀，且仅限于目标浏览器真正支持、但需要前缀的特性。
为什么 IE11 里 display: flex 没有 -ms-flexbox？
Autoprefixer 对 Flexbox 的前缀生成是条件触发的，不是“写了就加”。它必须同时满足：
- 你的
browserslist明确包含 IE11（例如["IE >= 11"]或["ie 11"]） - Autoprefixer 版本 ≥ v10 时，需手动启用老式语法：
require('autoprefixer')({ flexbox: '2009' }) - 源码中不能已存在
display: -webkit-flex这类手动前缀——一旦出现，Autoprefixer 会跳过整条声明
常见错误是写 "last 2 versions"，这个查询默认不含 IE，结果连 -ms- 前缀都不会生成。
Grid 在 IE10/11 和 Safari ≤10.1 为什么白屏？
因为 display: grid 在这些浏览器里根本无法解析，不是样式失效，而是整个声明被忽略。Autoprefixer 完全不负责语法降级。
立即学习“前端免费学习笔记（深入）”；
- IE10/11 必须手写双版本：
display: -ms-grid; display: grid; -
grid-template-columns: 1fr 2fr要对应写成-ms-grid-columns: 1fr 2fr（注意：IE 实际支持fr，但部分旧系统有 bug，建议用auto或固定值兜底） - Safari ≤10.1 不识别
grid-gap，autoprefixer默认不输出-webkit-grid-gap；即使开启grid: true，也只会展开为grid-row-gap/grid-column-gap，仍无-webkit-前缀
结论：Grid 兼容必须靠手写双写，不能依赖 Autoprefixer 自动转换。
Vue / React 项目里前缀没生效，真是 Autoprefixer 失效了吗？
绝大多数情况不是插件问题，而是 CSS 根本没进 PostCSS 流程。
- Vite 项目：检查
vite.config.js的css.postcss是否返回含autoprefixer()的配置对象 - Vue CLI：确认
vue.config.js中未设置css.requireModuleExtension: false（这会让非.module.css文件绕过 PostCSS） - CRA eject 后：Webpack 配置里
postcss-loader的postcssOptions.plugins必须显式包含autoprefixer() -
public/目录下的 CSS 文件用<link>引入？它完全不走构建流程，Autoprefixer 一概不管
一个简单验证法：npx autoprefixer --info 可查当前配置下哪些特性会被加前缀；但更关键的是先确认你的 CSS 真的被它处理了。
最常被忽略的点：Autoprefixer 是“补前缀”，不是“修兼容”。它不会纠正错误语法，不会降级不支持的特性，也不会覆盖你手写的前缀——反而可能删掉它们。要让它起作用，前提是源码写对、流程走通、配置精准。
