postcss本身不修复兼容性问题，真正起作用的是插件；autoprefixer需显式配置flexbox: 'no-2009'且browserslist声明ie 11才能输出-ms-flexbox；postcss-flexbugs-fixes必须置于autoprefixer之前以修复safari等flexbug；插件顺序、配置和构建链路任一偏差均导致静默失效。
PostCSS 本身不修复任何兼容性问题，它只是管道；真正干活的是插件，且插件顺序、配置细节和构建链路稍有偏差，就会静默失效。
autoprefixer 不加 -ms-flexbox？检查 flexbox 配置和 browserslist
IE 11 的 display: -ms-flexbox 不会自动出现，Autoprefixer 默认只输出标准前缀（如 -webkit-）。
- 必须在配置中显式传入
flexbox: 'no-2009'，否则插件跳过旧 Flexbox 语法 -
browserslist里得写明"IE 11"或"ie 11"，不能只靠"last 2 versions"侥幸匹配 - 运行
npx browserslist确认输出里真有ie 11；再跑npx autoprefixer --info看flex-direction是否被标记为“需要前缀” - Webpack 用户注意：
css-loader的importLoaders必须 ≥ 1，否则@import进来的 Bootstrap Sass 输出不会进postcss-loader
Flex 布局在 Safari 12.1 错位？用 postcss-flexbugs-fixes 插件
这类问题不是前缀缺失，而是浏览器渲染引擎的已知缺陷，autoprefixer 完全无能为力。
- 安装：
npm install --save-dev postcss-flexbugs-fixes - 必须放在
autoprefixer之前——顺序错一位，hack 就不会插入 - 它会自动补
min-height: 0、重写flex-basis计算逻辑等，专治 Safari/Firefox 的 Flexbug - 不处理 Grid、不支持
gap降级，别指望它覆盖所有布局问题
CSS 变量在 IE 11 全部失效？postcss-custom-properties 要设 preserve: false
IE 11 静默丢弃整条含 var(--x) 的声明，background: #007bff; background: var(--primary); 这种 fallback 写法在 IE 里等于只写了第一行，第二行被跳过。
- 必须配
preserve: false，否则插件只追加var()行，不删原始调用 - 变量必须定义在
:root，值只能是纯常量（--color: red;✅，--size: calc(1rem + 2px);❌） - 媒体查询内定义的变量（如
@media (min-width: 768px) { :root { --gap: 16px; } }）通常无法被解析，提至顶层 - 若同时用了
css-vars-ponyfill，它依赖原始var()存在，此时必须配preserve: true，但 IE 下会双失效——PostCSS 没删，ponyfill 又因作用域问题不触发
嵌套语法 @nest 在 Chrome 118 以下不生效？确认用的是 postcss-nesting v10+
原生 @nest 仅在 Chrome 119+ / Safari 17.4+ 稳定支持，旧版浏览器根本不识别该语法，必须预处理。
- 必须用
postcss-nesting（不是postcss-nested），且版本 ≥ 10；运行npm list postcss-nesting确认 -
@nest &必须紧贴选择器最左侧，@nest & h2✅，@nest h2 &❌ - 不支持多层
@nest嵌套，@nest & ul { @nest & li { } }会静默失败，应写成@nest & ul li - 插件必须置于
autoprefixer、postcss-preset-env等之前，否则嵌套结构在到达它之前已被重写或破坏
最容易被忽略的是构建链路是否真把 CSS 文件送进了 PostCSS：Vite 项目删掉 css.postcss 字段，让其自动读取 postcss.config.js；Webpack 项目检查 postcss-loader 是否在 css-loader 之后、importLoaders 是否 ≥ 1；否则所有配置都只是纸上谈兵。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
