CSS 网格语法支持 IE10/11

Question

如何支持 IE10 and/or IE11 的网格布局？

到目前为止，我只发现 -ms- 前缀应该可以解决问题，但我只能让它在 Edge 浏览器上工作。

我已尝试查看 Microsoft 文档和 MDN 网络，但找不到任何帮助。

您可以在下面找到我使用的代码：

@supports (display:grid) {
  .App-body {
    display: grid;
    grid-template-columns: 300px auto 300px;
    grid-template-areas: "navbar  navbar  navbar" "leftside content content";
  }

  .leftside {
    grid-area: leftside;
    /*align-content: left;*/
  }

  .rightside {
    grid-area: rightside;
    /*align-content: right;*/
  }

  .content {
    grid-area: content;
    /*align-content: center;*/
  }

  .navbar {
    grid-area: navbar;
  }
}

@supports (display:-ms-grid) {
  .App-body {
    display: -ms-grid;
    -ms-grid-columns: 300px auto 300px;
  }

  .leftside {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    /*align-content: left;*/
  }

  .rightside {
    -ms-grid-row: 2;
    -ms-grid-column: 3;
    /*align-content: right;*/
  }

  .content {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
  }

  .navbar {
    -ms-grid-row: 1;
    -ms-grid-column-span: 3;
  }
}

Answer 1

@supports CSS 规则不受 Internet Explorer 支持，因此您需要将其删除才能使其正常工作。

此外，规则 grid-template-columns: 300px auto 300px; 和 -ms-grid-columns: 300px auto 300px; 对于 IE/Edge 和其他支持网格的浏览器来说并不等同：

将auto替换为1fr，如果你想让列占用所有剩余的 space.
如果您希望列宽由内容定义，则将 display: grid 替换为网格容器的 display: inline-grid（display: -ms-grid 替换为 IE\Edge）。

顺便说一下，您可以删除 IE/Edge 的 -ms-grid-column: 1 and -ms-grid-row: 1，因为它是 IE/Edge 的默认值。 IE/Edge 没有网格项自动放置功能，默认情况下 IE/Edge 将所有网格项堆叠在第一个单元格中。

CSS 网格语法支持 IE10/11

CSS Grid syntax to support IE10/11

css

internet-explorer

css-grid