时间戳

首页 > 解决方案 > 避免与 CSS 网格重叠的项目（在 IE11 中）

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

问题描述

我有最简单的 CSS Grid

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

.cell {
  border: 1px solid black;
}

这是一个工作示例。

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

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

标签： cssinternet-explorer-11css-grid

解决方案

问题基本上归结为 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 如果设置正确，如果您正在做网格模板区域之类的事情，它将如何为您完成繁重的工作。仍然没有自动放置，但如果您正在制作模板并放置元素，它确实可以节省一些时间。 阅读本文

推荐阅读