CSS 网格布局在 IE11 中不起作用，即使有前缀也是如此

Question

我正在为我的网格使用以下HTML标记。

<section class="grid">
<article class="grid-item width-2x height-2x">....</article>
<article class="grid-item">....</article>
<article class="grid-item">....</article>
<article class="grid-item width-2x">....</article>
<article class="grid-item height-2x">....</article>
<article class="grid-item">....</article>
<article class="grid-item">....</article>
<article class="grid-item width-2x height-2x">....</article>
</section>

SCSS 代码如下所示：

.grid {
display: grid;
grid-template-columns: repeat( 4, 1fr );
grid-gap: 30px;
align-items: start;
.grid-item {
&.height-2x {
grid-row: span 2;
}
&.width-2x {
grid-column: span 2;
}
}
}

由于我在工作流程中使用自动前缀器，它会自动添加带有前缀-ms所有相关属性。我可以通过检查元素确认。

现在，问题是这段代码在Chrome，Firefox和Opera中运行良好，但是当我在Microsoft Edge或IE 11中打开此页面时，所有网格项在第一个单元格中相互重叠。根据这个网站，这些浏览器支持带有-ms前缀的CSS网格布局。我为此方案创建了一个代码笔。

代码笔链接

为什么它不起作用？

.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[4];
grid-template-columns: repeat(4, 1fr);
-ms-grid-rows: (270px)[4];
grid-template-rows: repeat(4, 270px);
grid-gap: 30px;
}
.grid .grid-item {
background-color: #000;
color: #fff;
text-align: center;
line-height: 270px;
}
.grid .grid-item.height-2x {
-ms-grid-row: span 2;
grid-row: span 2;
}
.grid .grid-item.width-2x {
-ms-grid-column: span 2;
grid-column: span 2;
}

<section class="grid">
<article class="grid-item width-2x height-2x">....</article>
<article class="grid-item">....</article>
<article class="grid-item">....</article>
<article class="grid-item width-2x">....</article>
<article class="grid-item height-2x">....</article>
<article class="grid-item">....</article>
<article class="grid-item">....</article>
<article class="grid-item width-2x height-2x">....</article>
</section>

Answer 1

IE11使用旧版本的网格规范。

您正在使用的属性在较旧的网格规范中不存在。 使用前缀没有区别。

以下是我立即看到的三个问题。

---

repeat()

旧规范中不存在repeat()函数，因此 IE11 不支持它。

您需要使用正确的语法，这在本文的另一个答案中有所介绍，或者声明所有行和列长度。

而不是：

.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: repeat( 4, 1fr );
grid-template-columns: repeat( 4, 1fr );
-ms-grid-rows: repeat( 4, 270px );
grid-template-rows: repeat( 4, 270px );
grid-gap: 30px;
}

用：

.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr 1fr 1fr;             /* adjusted */
grid-template-columns:  repeat( 4, 1fr );
-ms-grid-rows: 270px 270px 270px 270px;        /* adjusted */
grid-template-rows: repeat( 4, 270px );
grid-gap: 30px;
}

旧规格参考： https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#grid-repeating-columns-and-rows

---

span

span关键字在旧规范中不存在，因此 IE11 不支持它。您必须为这些浏览器使用等效属性。

而不是：

.grid .grid-item.height-2x {
-ms-grid-row: span 2;
grid-row: span 2;
}
.grid .grid-item.width-2x {
-ms-grid-column: span 2;
grid-column: span 2;
}

用：

.grid .grid-item.height-2x {
-ms-grid-row-span: 2;          /* adjusted */
grid-row: span 2;
}
.grid .grid-item.width-2x {
-ms-grid-column-span: 2;       /* adjusted */
grid-column: span 2;
}

旧规格参考： https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#grid-row-span-and-grid-column-span

---

grid-gap

grid-gap属性及其长手形式grid-column-gap和grid-row-gap在旧规范中不存在，因此 IE11 不支持它们。你必须找到另一种方法来分隔盒子。我还没有阅读整个旧规范，所以可能有一种方法。否则，请尝试边距。

---

网格项自动放置

旧规范中有一些关于网格项自动放置的讨论，但该功能从未在 IE11 中实现。(自动放置网格项现在是当前浏览器中的标准配置(。

因此，除非您专门定义网格项的位置，否则它们将堆叠在单元格 1,1 中。

使用"-ms-grid-row"和"-ms-grid-column"属性。

• CSS 网格在 IE/EDGE 中的自动放置
• 尽管有前缀，CSS 网格在 ie11 中不起作用
• https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#automatic-placement-of-grid-items

Answer 2

Michael给出了一个非常全面的答案，但我想指出一些你仍然可以做的事情，以便能够以几乎无痛的方式在IE中使用网格。

支持repeat功能

您仍然可以使用重复功能，它只是隐藏在不同的语法后面。与其写repeat(4, 1fr)，不如写(1fr)[4]。就是这样。 有关当前事态，请参阅以下系列文章：https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/

支持网格间隙

除 IE 外，所有浏览器都支持网格间隙。因此，您可以使用@supportsat-rule有条件地为所有新浏览器设置网格间隙：

例：

.grid {
display: grid;
}
.item {
margin-right: 1rem;
margin-bottom: 1rem;
}
@supports (grid-gap: 1rem) {
.grid {
grid-gap: 1rem;
}
.item {
margin-right: 0;
margin-bottom: 0;
}
}

这有点冗长，但从好的方面来说，您不必为了支持 IE 而完全放弃网格。

使用自动前缀器

我怎么强调都不为过 - 只需在构建步骤中使用自动前缀器即可解决网格的一半痛苦。以标准投诉的方式编写您的 CSS，然后让自动前缀器自动转换所有旧规范属性。当您决定不想支持 IE 时，只需更改浏览器列表配置中的一行，您就会从构建的文件中删除所有特定于 IE 的代码。

Answer 3

Faisal Khurshid和Michael_B已经给出了答案。
这只是试图使可能的解决方案更加明显。

对于 IE11 及更低版本，您需要在父div 中启用网格的旧规范，例如 body 或像这里的"网格"一样：

.grid-parent{display:-ms-grid;}

然后定义列和行的数量和宽度，例如：

.grid-parent{
-ms-grid-columns: 1fr 3fr;
-ms-grid-rows: 4fr;
}

最后，您需要明确地告诉浏览器您的元素(项目(应该放置在哪里，例如：

.grid-item-1{
-ms-grid-column: 1;
-ms-grid-row: 1;
}
.grid-item-2{
-ms-grid-column: 2;
-ms-grid-row: 1;
}

Answer 4

为了支持具有自动放置功能的 IE11，每次仅在1 维中使用网格布局时，我都会将grid转换为table布局。我也用margin代替grid-gap.

结果是一样的，看看你怎么能做到 这里 https://jsfiddle.net/hp95z6v1/3/