Autoprefixer仅补全现代CSS特性在部分旧浏览器中的带前缀语法，如IE10+/Safari≤15.6的Flexbox，但无法支持IE9等完全不兼容环境，需配合@supports或JS降级。
Autoprefixer 本身不处理 Grid 的 IE 兼容，也不能让 Flexbox 在 IE9 及以下运行；它只补全带前缀的现代语法，比如 -webkit-flex 或 -ms-flexbox，对 IE10+ 和 Safari ≤15.6 这类“半支持”环境有效，但对完全不支持的场景（如 IE9 的 display: flex）无能为力。
Autoprefixer 能补哪些 Flexbox 前缀
它根据 browserslist 配置决定加哪些前缀。常见生效项：
-
display: flex→ 补display: -ms-flexbox（IE10/11）、display: -webkit-box（Safari ≤6.1） -
flex-direction、justify-content等属性在旧版 Safari/Android WebView 中会加-webkit-前缀 - 不会补
flex: 1的老写法（如-webkit-box-flex: 1），除非你用的是极老配置（last 4 versions+ iOS - 如果源码写了
display: flex却漏了flex-direction，Autoprefixer 可能整条规则丢弃——它依赖标准语法输入
Grid 在 Autoprefixer 里基本不加前缀
现代 Grid（grid-template-columns、gap 等）在所有主流构建工具中默认不加前缀，因为：
- Chrome ≥57、Firefox ≥52、Safari ≥10.1、Edge ≥16 均原生支持，无需前缀
- IE10/11 的
-ms-grid是**完全不同的语法**，Autoprefixer 不转换也不生成；它只做前缀补全，不做语法降级 - 如果你看到
-ms-grid-columns出现在输出 CSS 里，那一定是手写或用了其他插件（比如postcss-ie11） - 试图用
display: -ms-grid+display: grid同时声明，IE11 会认前者，但现代浏览器会忽略前者并用后者——这没问题；但若没配@supports或媒体查询隔离，其他浏览器可能因解析错误丢掉整块规则
不配 browserslist 就等于没配 Autoprefixer
很多项目跑着 Autoprefixer 却没生效，核心原因是没定义目标环境。例如：
-
"browserslist": ["last 2 versions"]会漏掉 iOS Safari 14.5（仍有约 3% 市场份额），导致-webkit-backdrop-filter没补上 -
"browserslist": ["> 1%", "not dead", "ie 11"]才能覆盖 IE11 + 主流移动旧版本 - 运行
npx autoprefixer --info可直接看到当前配置实际匹配哪些浏览器版本 - 检查最终生成的 CSS 文件，确认关键属性（如
display: flex）确实被扩展成多行，而不是只有一行标准写法
真正容易被忽略的点是：Autoprefixer 解决不了语法鸿沟。它让「已支持但需前缀」的特性跑起来，但对「完全不支持」的环境（如 IE9 的 Flex、IE10 的 gap）必须靠 @supports、JS 检测或彻底降级布局来兜底。别指望一个插件包打天下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
