避免与 CSS 网格重叠的项目（在 IE11 中）答案

【问题标题】：Avoid overlapping item with CSS grid (in IE11)避免与 CSS 网格重叠的项目（在 IE11 中）
【发布时间】：2018-08-23 09:19:58
【问题描述】：

我有最简单的 CSS 网格

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50% 50%;
      grid-template-columns: 1fr 1fr;
}

.cell {
  border: 1px solid black;
}

Here，一个工作示例。

在主流浏览器上，它按预期工作，但在 Internet Explorer 11 中，网格元素是重叠的。

有没有办法（不把它们变成 flex）在 IE11 上解决这个问题？

【问题讨论】：

您找到解决问题的方法了吗？我也遇到了同样的问题。
不幸的是没有...我不得不回到 flex css-tricks.com/…
同样的问题
相关：stackoverflow.com/q/45786788/3597276

标签： css internet-explorer-11 css-grid

【解决方案1】：

问题基本上归结为 IE 不像其他浏览器那样自动放置。除非你告诉它你想要网格中每个元素的位置，否则它会假设你想要第 1 列第 1 行中的所有内容。如果这是一个动态网站，你最好使用 flexbox。如果它像您的示例并且您知道每个元素的去向，那么您必须这样说：

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50% 50%;
      grid-template-columns: 1fr 1fr;
}

.cell {
  border: 1px solid black;
}

.cell:first-of-type{
  -ms-grid-column: 1;
  -ms-grid-row: 1;
  -ms-grid-column-span: 1;
  }

.cell:last-of-type{
  -ms-grid-column: 2;
  -ms-grid-row: 1;
  -ms-grid-column-span: 1;
  }

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="grid">
  <div class="cell">a</div>
  <div class="cell">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b</div>
</div>
</body>
</html>

如果您真的需要 IE 支持，那么您可能应该坚持使用 flexbox。他们只是相处不来。

更新：我最近偶然发现了一篇文章，其中概述了 Autoprefixer 如果设置正确，如果您正在执行网格模板区域之类的事情，它将如何为您完成繁重的工作。仍然没有自动放置，但如果您正在制作模板并放置元素，它确实可以节省一些时间。 Read This Article

【讨论】：