autoprefixer无法自动解决ie10/11和safari≤10.1的css grid兼容问题，仅做有限前缀补全，不转换语法；需手动书写-ms-grid、-webkit-grid-gap等双版本代码。
Autoprefixer 不能自动解决旧版浏览器的 CSS Grid 兼容问题，尤其对 IE10/11 和 Safari ≤10.1，它只做有限的前缀补全，不转换语法模型——你写的源码必须符合目标浏览器的原生支持规范，否则编译后照样白屏或错位。
IE10/11 中 display: grid 完全无效，必须手动改写为 -ms-grid
IE10/11 不认识 display: grid，连解析都不解析，不是样式没生效，是声明被直接忽略。Autoprefixer 不会“把 display: grid 改成 display: -ms-grid”，它只在你 already 写了 display: -ms-grid 的前提下，帮你补 -ms-grid-columns 等属性。
- 源码中必须显式写
display: -ms-grid，再叠加display: grid作降级 fallback -
grid-template-columns: 1fr 2fr要手动转成-ms-grid-columns: 1fr 2fr（注意：IE 实际支持该写法，但fr单位在部分老版本中仍有兼容风险，稳妥起见建议用auto、100px或百分比） -
grid-area: header会被 Autoprefixer 转成-ms-grid-row/-ms-grid-column，但前提是容器已声明display: -ms-grid且定义了grid-template-areas - IE 对
-ms-grid-row-align等对齐属性支持极差，建议放弃，改用text-align: center或margin: auto降级
Safari ≤10.1 不识别 grid-gap，且 autoprefixer 默认不补 -webkit-grid-gap
即使配置 browserslist: ["safari 10"]，autoprefixer 也不会输出 -webkit-grid-gap —— 它认为 Grid 前缀已过时，grid-gap 的兼容处理被主动禁用。
- 必须人工双写：
-webkit-grid-gap: 12px;+grid-gap: 12px; - 若想让 autoprefixer 处理
gap（Level 2 语法），需在postcss.config.js中启用grid: true，且源码中必须写gap: 12px，而非grid-gap - 启用
grid: true后，autoprefixer 仅会将gap展开为grid-row-gap和grid-column-gap，仍不会加-webkit-前缀 - 因此 Safari 10.1 兼容必须靠手写，无法全自动
autoprefixer 的 grid: "autoplace" 配置实际作用很窄
grid: "autoplace" 并非开启“全面 Grid 兼容”，它只触发对 grid-area、grid-template-areas 等区域相关属性的 -ms- 映射，且依赖容器已用 display: -ms-grid。
- 它不会处理
grid-template-columns→-ms-grid-columns的转换，除非你同时写了display: -ms-grid - 它不碰
grid-gap、justify-items、align-content等绝大多数布局控制属性 - 它不支持
fr单位在 IE 中的换算，也不会把1fr拆成minmax(0, 1fr)（IE 根本不认这个） - 如果你的构建流程里还用了
postcss-preset-env，确保它在 autoprefixer 之后运行，否则 preset-env 可能提前把-ms-语法又转回现代写法
真正决定兼容性的从来不是 autoprefixer 配置，而是你源码里是否写了 IE/Safari 能看懂的语句。工具只是翻译官，不是重构器；它不会凭空造出 -ms-grid，也不会猜你要在 Safari 里加 -webkit-。手写双版本仍是目前最可靠的方式，尤其当项目必须支持 Safari 10.1 或 IE11 时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
