autoprefixer仅添加属性前缀，不解决盒模型语义差异；IE10/11需手动配置browserslist、flexbox:'no-2009'及postcss-flexbugs-fixes插件顺序，并对gap、aspect-ratio、grid等做人工降级。
PostCSS 本身不处理盒模型兼容，真正起作用的是 autoprefixer 插件配合精确的 browserslist 配置——但仅靠它，IE 10/11 的 box-sizing: border-box、display: flex 等仍可能失效，因为这些不是加前缀就能解决的语义级差异。
为什么 autoprefixer 不会自动修复 IE 盒模型问题
autoprefixer 只负责添加 CSS 属性前缀（如 -webkit-、-ms-），而 IE 的盒模型行为（比如老式 box-sizing 解析、flex 的旧语法、inline-block 垂直对齐 bug）属于渲染引擎实现差异，不是前缀缺失导致的。它不会把 display: flex 转成 display: -ms-flexbox，除非你显式启用旧 Flexbox 支持。
- 默认情况下，
autoprefixerv10+ 只输出标准语法（display: flex），不生成-ms-flexbox -
box-sizing: border-box在 IE8+ 已原生支持，无需前缀；但若你混用了zoom: 1或*display: inline这类 hack，反而可能干扰 PostCSS 处理 - IE 对
calc()、vh/vw单位、flex-wrap+min-height组合等有独立 bug，这些必须靠postcss-flexbugs-fixes等专用插件干预
必须配置的三项核心：browserslist、flexbox 模式、插件顺序
要让 IE 10/11 的盒模型相关样式真正生效，这三者缺一不可：
- 在
package.json或.browserslistrc中明确声明：["IE >= 10", "Edge >= 12"]—— 不能只写"last 2 versions"，否则autoprefixer查不到 IE 规则 - 在
autoprefixer()配置中传入{ flexbox: 'no-2009' }（注意是'no-2009'，不是'2009'），否则不会输出display: -ms-flexbox和flex-direction: -ms-flex-direction -
postcss-flexbugs-fixes必须放在autoprefixer之前，否则它的 hack 注入（如给flex-direction: column补min-height: 0）会被后续前缀处理覆盖或忽略
哪些盒模型相关 CSS 仍需手动降级
PostCSS 插件链无法改变语义，以下情况必须人工干预：
-
gap：IE 完全不识别，autoprefixer和postcss-flexbugs-fixes都不处理，得用margin或padding模拟 -
aspect-ratio：无前缀、无 polyfill、无 fallback 方案，IE 下只能重写为padding-top百分比布局 -
display: grid：IE11 支持的是过时语法（display: -ms-grid），但autoprefixer默认不启用，且无法自动转换grid-template-areas等现代写法 -
@supports (display: flex)：IE 全系不解析该语法，整块规则被静默丢弃，不能依赖它做降级分支
最易被忽略的一点：Webpack 中若同时启用了 css-loader 的 importLoaders 和独立的 postcss-loader，会导致 PostCSS 配置被跳过——必须确认 postcss-loader 的 postcssOptions.plugins 显式列出了 require('autoprefixer')({ flexbox: 'no-2009' }) 和 require('postcss-flexbugs-fixes')，而不是只装了包没注册。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
