Question

我拥有最简单的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中，网格元素重叠。

有没有办法（不让它们变弯曲）来解决IE11上的问题？

Answer 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

避免将项目与CSS网格重叠（在IE11中）

1 个答案: