HTML Grid 无法改善 IE 支持，反而使表现更差——IE10/11 仅支持带 -ms- 前缀的旧语法，不识别标准 grid 属性；grid-gap、grid-template-areas、fr 单位、自动定位等均失效或退化；Autoprefixer 的 grid: 'autoplace' 不生成兼容逻辑，也不补全必需声明。
HTML Grid 不能改善 IE 支持，反而会让 IE 表现更差 —— 因为 IE 对 Grid 的支持是残缺的、带前缀的、且仅限于 IE10+，而现代 Grid 写法在 IE 中多数直接失效或退化为块级堆叠。
IE 中 display: grid 的实际行为
IE10/11 只识别带 -ms- 前缀的旧版 Grid 语法（如 display: -ms-grid），不支持标准 display: grid。即使你用 Autoprefixer 加了前缀，以下关键差异仍会导致布局崩溃：
-
grid-gap在 IE 中完全无效，必须改用-ms-grid-row-gap和-ms-grid-column-gap，且只在明确声明-ms-grid-rows和-ms-grid-columns后才起作用 -
grid-template-areas不被识别，所有grid-area声明都会被忽略 -
fr单位在-ms-grid-columns中不支持，只能用px、em或auto - 自动定位（如
grid-auto-flow）在 IE 中无对应实现，项目会全部挤在第一格
Autoprefixer 配置陷阱：grid: 'autoplace' 不等于 IE 可用
很多人以为在 postcss.config.js 或 vue.config.js 里加了 require('autoprefixer')({ grid: 'autoplace' }) 就能“兼容 IE”，但这是误解：
- 该配置只对标准 Grid 属性生成
-ms-前缀版本，不会重写逻辑（比如把grid-template-columns: repeat(3, 1fr)拆成-ms-grid-columns: 1fr 1fr 1fr） - Autoprefixer 不会补全缺失的 IE 必需声明（例如：没写
-ms-grid-rows，它不会自动生成） - 一旦用了
grid-area或grid-column-start这类属性，IE 会直接忽略整条规则，而不是降级渲染 - Vue CLI 4 默认的
browserslist若含not ie ，仍会输出现代语法，Autoprefixer 不会主动降级为 IE 可执行的等效写法
真正在 IE 中跑通 Grid 的最低可行写法
如果你必须支持 IE11，就别用现代 Grid 语法，而是手写两套：一套给现代浏览器，一套专供 IE 的 -ms-grid。示例结构如下：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
@supports not (display: grid) {
.container {
display: -ms-grid;
-ms-grid-columns: 1fr 20px 1fr 20px 1fr;
-ms-grid-rows: auto;
}
.item:nth-child(1) { -ms-grid-column: 1; }
.item:nth-child(2) { -ms-grid-column: 3; }
.item:nth-child(3) { -ms-grid-column: 5; }
}
注意点：
- IE 不支持
@supports display: grid检测（它自己就不认识这个值），得用 JS 特征检测或 UA 判断来加载不同 CSS -
-ms-grid-columns必须显式写出所有列和间隙（间隙也占一列），不能靠repeat() - 每个子项必须用
-ms-grid-column+-ms-grid-row精确指定位置，否则默认全落在第 1 行第 1 列 - Flex 布局在 IE10+ 支持度远好于 Grid，简单横向排列优先选
display: -ms-flexbox
为什么 “加个前缀就 OK” 是最危险的错觉
很多团队在 CI 构建后只在 Chrome 里点开看一眼，就认为 Grid 兼容完成了。但 IE 实际运行时会暴露三个隐蔽问题：
- CSS 解析失败静默吞掉整条规则（比如写了
grid-template-areas，IE 直接跳过后续所有同选择器样式） - 计算出的尺寸为
0px（尤其当fr单位未被降级，又没 fallback 宽度时） - DOM 顺序与视觉顺序严重错位（IE 的
-ms-grid不支持order，也无法响应grid-auto-flow: dense）
真正可靠的方案不是“让 Grid 跑在 IE 上”，而是用 @supports 或 JS 检测隔离现代布局，并为 IE 提供语义一致但技术降级的替代实现 —— 比如用 float + calc() 模拟三栏，或用 table 布局保底。Grid 的设计初衷就不是为 IE 存在的，强行塞进去只会增加不可维护的条件分支。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
