如何在IE11中正确使用CSS Grid的-ms-网格布局属性？-css教程-PHP中文网

IE11 的 -ms-grid 与标准 Grid 完全不兼容，需重写全部逻辑：不支持 fr 单位、gap、grid-template-areas 等，网格线编号从 0 开始，且必须使用 -ms- 前缀属性手动定位。

如何在ie11中正确使用css grid的-ms-网格布局属性？

IE11 的 -ms-grid 不是现代 Grid 的“兼容写法”，而是完全不同的语法体系；强行套用标准 Grid 属性只会失效，必须重写整套逻辑。

为什么 `display: -ms-grid` 不能直接替代 `display: grid`

IE11 的 -ms-grid 是微软早期草案实现，和 W3C 最终标准不兼容：它不支持 fr 单位、grid-template-areas、gap、auto-flow，连网格线编号规则都不同（IE11 从 0 开始，标准从 1 开始）。你写的 grid-column: 2 / 4 在 IE11 里会被完全忽略——它只认 -ms-grid-column 和 -ms-grid-column-span 这类前缀属性。

grid-template-columns: 1fr 2fr → 必须拆成 -ms-grid-columns: 1fr 2fr（仅 IE11 支持 fr，但行为不一致）
grid-area: "header" → IE11 完全不识别，得手动用 -ms-grid-row + -ms-grid-column 定位
gap: 12px → IE11 无对应属性，只能靠 padding 或额外 wrapper 模拟

必须显式声明 `-ms-grid` 容器并重写所有项目定位

光加 display: -ms-grid 不够，每个网格项目都得单独配 IE11 专属定位属性。例如一个两列布局：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.container {
  display: -ms-grid;
  -ms-grid-columns: 200px 1fr;
  -ms-grid-rows: auto 1fr auto;
}
.header { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; }
.sidebar { -ms-grid-row: 2; -ms-grid-column: 1; }
.main { -ms-grid-row: 2; -ms-grid-column: 2; }
.footer { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 2; }

别混用 grid-column 和 -ms-grid-column：浏览器会各自解析，结果不可控
-ms-grid-column-span 和 -ms-grid-row-span 是唯一跨格方式，没有 span 2 简写
IE11 不支持 minmax()，要限制最小宽度只能用固定值或 JS 动态计算

用 `@supports` 隔离现代写法，避免 CSS 膨胀失控

不要指望 PostCSS 插件自动补全 IE11 代码——它无法转换语义差异，只会让样式表体积翻倍且维护困难。正确做法是用特性检测分层：

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "header header" "sidebar main" "footer footer";
  }
  .header { grid-area: header; }
  /* 其他现代写法 */
}
@supports not (display: grid) {
  .container {
    display: -ms-grid;
    -ms-grid-columns: 200px 1fr;
    -ms-grid-rows: auto 1fr auto;
  }
  .header { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; }
  /* 手动重写所有项目 */
}