PostCSS 本身不修复漏洞，真正起作用的是插件；autoprefixer 需显式配置 flexbox: 'no-2009' 并在 browserslist 中声明 IE 11 才支持旧 Flexbox 语法；postcss-flexbugs-fixes 必须置于 autoprefixer 之前以修复 Safari 等浏览器的 Flexbug；postcss-preset-env 需手动控制 stage 和 features 实现安全降级；插件执行顺序至关重要，错序将导致修复失效。
PostCSS 本身不修复漏洞，它靠插件干活；真正起作用的是 postcss-flexbugs-fixes、autoprefixer 和 postcss-preset-env 这类插件，它们各自解决不同层面的兼容性问题——不是“一键全修”，而是按需组合。
为什么 autoprefixer 加了前缀，IE 11 还是不认 flex 布局？
因为 Autoprefixer 默认只加标准前缀（如 -webkit-），对 IE 10/11 的旧 Flexbox 语法（-ms-flexbox）需要显式启用支持。
- 必须在
autoprefixer配置中传flexbox: 'no-2009'，否则不会输出display: -ms-flexbox -
browserslist里得明确写上"IE 11"，否则 Autoprefixer 查询 Can I Use 时会跳过 IE 相关规则 - 执行
npx browserslist确认输出里真有ie 11，而不是只看到chrome 125这类新版本 - 如果用 Webpack，检查是否同时配了
css-loader（自带 PostCSS）和postcss-loader——重复加载会导致插件被忽略
Flex 布局在 Safari 12.1 下错位，光加前缀没用怎么办？
这是典型的 Flexbugs：Safari 12.1 对 flex-wrap: wrap + min-height 组合有渲染 bug，Autoprefixer 加前缀解决不了，得靠 postcss-flexbugs-fixes。
- 安装：
npm install --save-dev postcss-flexbugs-fixes - 在
postcss.config.js中把它放在autoprefixer之前（顺序影响处理逻辑） - 它会自动插入 hack，比如给
flex-direction: column容器补min-height: 0来绕过 Safari 的计算错误 - 注意：这个插件不处理 Grid，只专注 Flexbox 已知缺陷，别指望它修复
gap在旧浏览器的缺失
想用 :is() 或嵌套语法，但还要兼容 Chrome 63？
postcss-preset-env 是这时候的主力，但它不是无脑降级——stage 和 features 要手动控制，否则可能把现代语法转成一堆冗余 fallback。
立即学习“前端免费学习笔记（深入）”；
-
stage: 3对应 CSSWG 标准草案第三阶段，能安全启用:is()、custom-properties，但不包括nesting-rules（stage 5 才稳定） - 显式开启嵌套：
features: { 'nesting-rules': true }，否则即使写了&:hover也不会编译 - 它生成的 fallback 是真实可用的 CSS（比如把
:is(.a, .b) p拆成.a p, .b p），不是 JS Polyfill - 别和
cssnano冲突：如果压缩后样式失效，检查cssnano是否启用了内置autoprefixer，必须设autoprefixer: false
真正容易被忽略的点是：PostCSS 插件之间有依赖关系和执行顺序，postcss-flexbugs-fixes 必须在 autoprefixer 之前运行，而 postcss-preset-env 又得在两者之后——顺序错了，修复就白做了。
