Autoprefixer未加前缀的主因是未运行，常见于配置文件位置错误、构建工具未加载PostCSS、CSS绕过处理流程；browserslist需精确指定如"IE >= 11"并设flexbox: '2009'；它只补前缀，不降级特性或修复语义兼容问题。
PostCSS 本身不补前缀，必须靠 autoprefixer 插件干活；没配对、没走通构建流程、browserslist 写错，都会导致前缀完全不出现——绝大多数“没生效”问题，根源都在这三处。
为什么 autoprefixer 没加任何前缀？
不是插件坏了，而是它根本没运行。常见断点：
-
postcss.config.js放错位置（Vite 要求在项目根目录；Webpack 不读它，得靠postcss-loader显式传入） - 构建工具没加载 PostCSS：Vite 5+ 默认启用，但你在
vite.config.js里写了css.postcss字段，反而会覆盖默认行为 - CSS 文件绕过了构建流程：比如把
reset.css直接扔进public/目录，用<link>引入——这类文件完全不经过 PostCSS - Vue 单文件组件中，
<style></style>默认不走 PostCSS；要写成<style lang="postcss"></style>或确认vue-style-loader+css-loader+postcss-loader链路完整
实操验证法：postcss.config.js 里加一行 require('xxx-missing-plugin')，启动不报错 → 配置文件压根没被读取。
browserslist 怎么写才让 IE 11 补 -ms- 前缀？
Autoprefixer 完全按 browserslist 查 Can I Use 数据库，模糊写法等于白配：
立即学习“前端免费学习笔记（深入）”；
- 写
"> 1%"可能拉进 IE 11，但如果你的项目实际已放弃 IE，就白白生成一堆-ms-前缀 - 写
"last 2 versions"会让 Safari 18 加-webkit-，但它早已原生支持gap，纯属冗余 - IE 10/11 的
flex需要-ms-flexbox，但autoprefixerv10+ 默认关闭了老式语法支持
必须显式配置：
["IE >= 11", "Chrome >= 45", "iOS >= 13"]
并在 autoprefixer() 调用时指定：
require('autoprefixer')({ flexbox: '2009' })
运行 npx browserslist 和 npx autoprefixer --info 确认匹配结果和实际处理项。
哪些 CSS 特性 autoprefixer 根本不会碰？
它只补前缀，不降级、不转译、不模拟：
-
gap、aspect-ratio、:has()：无对应前缀，也不会帮你转成margin或伪元素 hack -
@supports：IE 全系不支持该规则，Autoprefixer 不会把它编译成 JS 判断逻辑 -
backdrop-filter：iOS 15.4+ 才稳定支持-webkit-backdrop-filter，但 caniuse 状态不稳定，需手动加overrideBrowserslist: ["ios_saf >= 15.4"] - 写了
display: -webkit-flex这类手动前缀？Autoprefixer 反而会删掉它——它只负责“补标准语法”，不修旧代码
真正容易被忽略的是：加了 -ms-grid 不代表 IE 11 能正确渲染现代 Grid 布局，它的实现和规范差异极大，不能指望前缀解决语义兼容问题。
