PostCSS本身不解决IE11排版错乱，真正起作用的是插件选择、配置顺序和降级策略；autoprefixer仅补前缀不改逻辑，无法处理IE11旧版Flexbox与现代标准的语义差异，必须手动配对-ms-flex-*属性并控制声明顺序。
PostCSS 本身不解决 IE11 排版错乱，它只是个工具链；真正起作用的是你选的插件、配置顺序和降级策略是否匹配 IE11 的真实缺陷。
为什么 autoprefixer 不能单独搞定 IE11 flex 布局
Autoprefixer 只补前缀，不改逻辑。IE11 的 -ms-flexbox 和标准 flex 是两套不兼容的盒模型：它把 align-items: center 解析成 -ms-flex-align: center，但后者实际控制的是容器内所有子项的交叉轴对齐，且默认值是 stretch 而非 center。只加前缀不加对应 -ms- 属性声明，等于没写。
- 必须显式写出
-ms-flex-align和-ms-flex-item-align，不能依赖 autoprefixer 自动生成 -
flex: 1在 IE11 中完全无效，必须拆成-ms-flex: 1+flex: 1，且-ms-flex必须在前 -
flex-wrap: wrap需配-ms-flex-wrap: wrap，否则 IE11 当作nowrap处理
postcss-flexbugs-fixes 插件的实际效果与局限
这个插件能自动注入部分 IE11 专用修复，比如为 display: flex 补 display: -ms-flexbox、为 align-items 补 -ms-flex-align，但它无法处理语义冲突场景：
- 当 CSS 中同时出现
align-items: center和align-self: flex-start，插件会补两套-ms-属性，但 IE11 不支持-ms-flex-item-align覆盖容器级设置，结果仍是全部居中 - 它不修正
min-height与-ms-flex的交互问题：IE11 下min-height在 flex 子项上常被忽略，需手动加height: 1px或flex-shrink: 0 - 对
grid-gap、auto-fit、fr单位等 Grid 相关语法，插件完全不处理——IE11 的-ms-grid不支持这些
PostCSS 配置里最容易漏掉的关键点
很多团队装了插件却仍出问题，往往卡在三处配置细节：
-
autoprefixer的browsers选项必须明确包含IE >= 11，写成last 2 versions会漏掉 IE11（因 Edge 已迭代） -
postcss-flexbugs-fixes必须放在autoprefixer之后，否则 autoprefixer 生成的前缀可能被覆盖或冲突 - 若项目用了
postcss-preset-env，要禁用它的stage: 0功能（如gap、aspect-ratio），否则它会把现代语法“乐观编译”成 IE11 无法识别的结构
真正兜底的降级不是靠 PostCSS，而是 CSS 层级控制
PostCSS 插件再全，也无法让 IE11 正确解析 grid-template-areas 或 justify-content: space-evenly。最终方案得靠 CSS 本身分层：
- 用
@supports (display: grid)包裹 Grid 布局，IE11 直接跳过整段规则 - IE11 专用样式用
@media all and (-ms-high-contrast: none)隔离，避免和现代 flex 规则混写导致尺寸错乱 - 对复杂卡片布局，别强求 IE11 也用 flex-wrap，改用
display: table+table-cell更稳——PostCSS 做不了这种语义替换
最常被忽略的是：IE11 对 calc() 内嵌 100% - 20px 的解析极不稳定，尤其在 flex-basis 里。即便 PostCSS 把它转成带前缀的版本，IE11 仍可能按 content-box 计算宽度。这时候，宁可用固定像素值或 JS 动态计算，也别信“编译后就能跑”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
