Autoprefixer不会自动修复CSS兼容问题，仅按browserslist配置在已有标准语法上补前缀；它不转译语法、不降级特性，如display: grid不会转为-ms-grid，gap不生成-webkit-grid-gap，IE11需手动写-ms-flexbox并启用flexbox: '2009'。
Autoprefixer 不会“自动修复”旧版浏览器的 CSS 兼容问题，它只在你写了标准语法的前提下，按需补前缀；写错、漏写、或用了不被支持的语法，它不会纠正，也不会降级。
为什么 display: flex 在 IE11 里没 -ms-flexbox？
Autoprefixer 对 display: flex 加前缀是有条件的：必须同时满足两个前提——目标浏览器列表明确包含 IE11（如 ["IE >= 11"]），且 Autoprefixer 版本支持老式 Flexbox 语法。
- v10+ 默认关闭
flexbox: '2009'，即不再生成display: -ms-flexbox；需手动启用：require('autoprefixer')({ flexbox: '2009' }) -
browserslist写成> 0.5%或last 2 versions通常不含 IE，结果就是完全不加-ms-前缀 - 如果源码里已写
display: -webkit-flex，Autoprefixer 会跳过整条声明，认为你已接管兼容逻辑
Grid 布局在 IE10/11 里白屏？Autoprefixer 不负责语法转换
Autoprefixer 不会把 display: grid 改成 display: -ms-grid，它只在你 already 写了 display: -ms-grid 的前提下，补 -ms-grid-columns 等属性。
- IE10/11 完全不解析
display: grid，声明直接被忽略——这不是前缀问题，是语法不识别 - 必须手写双版本：
display: -ms-grid; display: grid;，否则 Autoprefixer 无从下手 -
grid-gap在 Safari ≤10.1 中无效，Autoprefixer 默认不输出-webkit-grid-gap；需人工双写：-webkit-grid-gap: 12px; grid-gap: 12px; - 启用
grid: true只会让gap展开为grid-row-gap/grid-column-gap，仍不加-webkit-
Vue / React 项目里前缀没生效？样式根本没进 PostCSS 流程
不是 Autoprefixer 失效，而是 CSS 没经过它处理。Vue 单文件组件的 <style>、React 的 import './index.css' 都需要显式接入 postcss-loader。
立即学习“前端免费学习笔记（深入）”；
- Vite 项目：检查
vite.config.js的css.postcss是否返回含autoprefixer()的配置对象 - Vue CLI：确认未在
vue.config.js中设置css.requireModuleExtension: false（这会跳过 PostCSS） - CRA eject 后：
webpack.config.js中postcss-loader的postcssOptions.plugins必须包含autoprefixer() - public/ 目录下的 CSS 文件用
<link>引入？它绕过构建流程，Autoprefixer 完全不触碰
backdrop-filter、scroll-behavior 这类属性为啥没前缀？
Autoprefixer 只对 Can I Use 数据库中标记为「需前缀才可用」的标准属性加前缀；像 backdrop-filter 这类 Safari 专属属性，它不“猜测”，也不“强制补”。
- 必须手动写：
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); - 推荐封装为 SCSS
@mixin，但仅限于这种「始终需要前置声明」的场景，不是通用前缀方案 - 不要用动态
@mixin vendor($prop, $val)——-webkit-display是非法语法，编译直接报错 - 运行
npx autoprefixer --info可查当前browserslist下哪些属性会被处理，避免盲目期待
真正容易被忽略的是：Autoprefixer 的输入必须是标准 CSS 语法，输出只是“加前缀”，不是“兜底兼容”。它不替代开发者对旧浏览器限制的理解，也不掩盖源码中本应存在的降级写法。
