Autoprefixer仅在标准CSS语法基础上按browserslist补厂商前缀，不转译语法、不降级特性、不修复错误；IE11需显式配置"IE >= 11"并启用flexbox: '2009'，Grid等不支持语法须手动双写，且CSS必须经PostCSS流程处理。
Autoprefixer 不会“兼容旧版 CSS 前缀”，它只在你写了**标准语法**的前提下，按 browserslist 配置补上**需要的前缀声明**；它不转换语法、不降级特性、不修复手写错误——写错 display: -webkit-flex，它可能直接删掉整条；写 display: grid，它不会生成 display: -ms-grid。
为什么 IE11 里 display: flex 没变成 -ms-flexbox
Autoprefixer 对 Flexbox 的前缀生成有严格前提：
- 目标浏览器列表必须显式包含
"IE >= 11"（不能靠"last 2 versions"碰运气） - Autoprefixer v10+ 默认关闭老式语法支持，需手动启用：
flexbox: '2009' - 源码中若已存在
display: -webkit-flex或display: -ms-flexbox，Autoprefixer 会跳过该声明，认为你已接管兼容逻辑 - browserslist 写在
package.json中比.browserslistrc更可靠，避免构建工具读取错位
Grid 布局在 IE10/11 白屏，Autoprefixer 为啥不救
因为这不是前缀问题，是语法不识别：
-
display: grid在 IE10/11 中被完全忽略，Autoprefixer 不会把它转成display: -ms-grid - 它只在你**已经写了**
display: -ms-grid的前提下，补-ms-grid-columns等配套属性 - 必须双写：
display: -ms-grid; display: grid;，否则 Autoprefixer 无从下手 -
grid-gap在 Safari ≤10.1 无效，Autoprefixer 默认不加-webkit-grid-gap，得手动双写
CSS 文件根本没进 PostCSS 流程，前缀当然不出现
这是最常被忽略的底层断点：
- Vite 项目：若在
vite.config.js中显式配置了css.postcss，会覆盖默认 PostCSS 加载逻辑，导致postcss.config.js被忽略 - Vue CLI 项目：若设置了
css.requireModuleExtension: false，.vue中的会绕过 PostCSS - Webpack 项目：
postcss-loader必须在css-loader之后，且css-loader的importLoaders≥ 1，否则@import的 CSS 不进流程 - public/ 目录下的 CSS 用
引入？它完全绕过构建，Autoprefixer 零接触
哪些 CSS 特性 Autoprefixer 根本不碰
它只补前缀，不模拟缺失功能：
-
backdrop-filter：iOS Safari 15.4+ 才稳定支持-webkit-backdrop-filter，但 caniuse 状态波动，需显式配browserslist: ["ios_saf >= 15.4"] -
vh单位在 iOS 地址栏收放时压缩：Autoprefixer 不动单位，得用 JS 注入--vh变量并监听 resize -
position: sticky在 iOS Safari 15.4 前嵌套失效：Autoprefixer 不识别此限制，需@supports降级或 JS polyfill -
aspect-ratio、gap、scroll-behavior等无主流前缀需求的属性，它默认不加任何前缀
真正难的不是配 Autoprefixer，而是判断哪些 CSS 行为是“缺前缀”、哪些是“根本不可用”——前者交给它，后者得你亲手写 fallback 或引入 polyfill。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
