ie10–11的grid实现是过时草案语法，与现代display: grid不兼容；-ms-grid需手动配置-ms-grid-columns/rows及每个子项的-ms-grid-column/row，grid-gap无效，@supports不可靠，实际项目应降级为flexbox或弃用ie支持。
HTML Grid 和 IE 支持存在根本性冲突：IE10–11 的 Grid 实现是过时的、非标准的草案语法，不能和现代 display: grid 共存；强行混用会导致布局完全失效，不是“少点功能”，而是“不渲染”。
IE11 的 -ms-grid 是另一套语法，不是加个前缀就能跑
IE11 不识别 grid-template-columns、grid-gap、grid-area 等现代属性，它只认自己的旧草案语法，比如 -ms-grid-columns、-ms-grid-rows、-ms-grid-column。这意味着：
- 不能靠 Autoprefixer 自动补
-ms-前缀——它不会把grid-template-columns: 1fr 2fr转成-ms-grid-columns: 1fr 2fr，因为语义不等价 -
display: -ms-grid和display: grid必须共存，但 IE11 会忽略后者，其他浏览器会忽略前者，这是唯一安全写法 - 每个子元素必须显式指定
-ms-grid-column和-ms-grid-row，否则全部堆在1 / 1位置，视觉上“糊成一团”
示例（仅对 IE11 有效）：
.container {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(3, 1fr);
}
.item:nth-child(1) { -ms-grid-column: 1; }
.item:nth-child(2) { -ms-grid-column: 2; }
.item:nth-child(3) { -ms-grid-column: 3; }
grid-gap 在 IE11 中基本不可用
grid-gap 在 IE11 中仅当 -ms-grid-rows 和 -ms-grid-columns 同时存在且定义了至少两行/两列时才可能生效，但行为不稳定，常被忽略。更常见的情况是：
- 写了
grid-gap: 20px，IE11 完全无视，子项紧贴排列 - 试图用
-ms-grid-gap: 20px？该属性根本不存在于 IE11 的私有语法中 - 替代方案只能是手动给子项加
margin，但需注意浮动/清除影响，或改用padding+box-sizing: border-box
@supports 无法可靠检测 IE11 的 Grid 支持
@supports (display: grid) 在 IE11 中返回 false，看似可用，但它也同时会让支持现代 Grid 的 Edge 16+、Chrome 57+ 等跳过降级样式——这反而导致新浏览器加载了本该只给 IE 的低效 fallback。真正可行的判断方式只有：
- 服务端 UA 检测，输出不同 HTML/CSS 片段（最稳妥）
- 客户端用 JS 检测
document.documentMode（IE11 返回 11，Edge 返回 undefined） - 避免依赖
@supports not (display: grid)做降级，它在部分 Chromium 内核 IE 兼容模式下会误判
真正能落地的兼容策略只有两个选择
继续用 Grid 的前提，是明确放弃 IE10–11 支持；如果必须兼容，就不要碰 Grid——这不是“加点 polyfill 就行”的问题，而是整套布局模型不匹配。实际项目中可选路径：
- 降级为 Flexbox：IE10+ 支持
display: -ms-flexbox，配合flex-wrap: wrap和justify-content可覆盖大多数一维布局场景（注意 IE11 的align-content不支持space-between） - 降级为 float + clearfix：适合简单栅格，用
float: left+width: calc(100% / 3 - gap)（IE9+ 支持calc），再用:nth-child(3n+1) { clear: left; } - 完全弃用 IE10–11 的 Grid 支持：2026 年主流项目已普遍将支持范围定为 “Edge 16+、Chrome 60+、Firefox 60+”，IE11 用户占比低于 0.3%，强制适配反而拖慢所有用户
最容易被忽略的一点：很多“Grid 在 IE 不显示”问题，其实根本没走到 CSS 渲染阶段——检查网络面板，确认 X-Frame-Options 或 Content-Security-Policy: frame-ancestors 没把 iframe 拦在门外。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
