Html CSS网格布局在IE11中即使有前缀也不起作用

我正在为我的网格使用以下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>

由于我在工作流中使用了自动前缀器，它会自动添加带有

-ms

前缀的所有相关属性。我可以通过检查元件来确认

现在，问题是这段代码在Chrome、Firefox和Opera中运行得很好，但当我在Microsoft Edge或IE 11中打开此页面时，所有网格项在第一个单元格中都相互重叠。据了解，这些浏览器支持带有

-ms

前缀的CSS网格布局。我已经为这个场景创建了一个代码笔

为什么它不起作用

.grid{
显示：-ms网格；
显示：网格；
-ms网格柱：（1fr）[4]；
网格模板列：重复（4，1fr）；
-ms网格行：（270px）[4]；
网格模板行：重复（4270px）；
栅极间隙：30px；
}
.grid.grid项{
背景色：#000；
颜色：#fff；
文本对齐：居中；
线高：270px；
}
.grid.grid-item.height-2x{
-ms网格行：跨度2；
网格行：跨度2；
}
.grid.grid-item.width-2x{
-ms网格柱：跨度2；
格构柱：跨度2；
}

....
....
....
....
....
....
....
....

IE11使用一个

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

这里有三个问题，我马上就看到了

---

repeat（）

repeat（）

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

您需要使用中介绍的正确语法，或者声明所有行和列的长度

而不是：

.grid{
显示：-ms网格；
显示：网格；
-ms网格列：重复（4，1fr）；
网格模板列：重复（4，1fr）；
-ms网格行：重复（4270像素）；
网格模板行：重复（4270px）；
栅极间隙：30px；
}

使用：

.grid{
显示：-ms网格；
显示：网格；
-ms网格列：1fr 1fr 1fr 1fr；/*已调整*/
网格模板列：重复（4，1fr）；
-ms网格行：270px 270px 270px 270px；/*已调整*/
网格模板行：重复（4270px）；
栅极间隙：30px；
}

旧规格参考：

---

span

span

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

而不是：

.grid.grid-item.height-2x{
-ms网格行：跨度2；
网格行：跨度2；
}
.grid.grid-item.width-2x{
-ms网格柱：跨度2；
格构柱：跨度2；
}

使用：

.grid.grid-item.height-2x{
-ms网格行跨度：2；/*已调整*/
网格行：跨度2；
}
.grid.grid-item.width-2x{
-ms网格柱跨度：2；/*已调整*/
格构柱：跨度2；
}

旧规格参考：

---

网格间距

grid-gap

属性及其长格式

grid-column-gap

和

grid-row-gap

，在旧规范中不存在，因此IE11不支持它们。你得另找一种方法把箱子分开。我还没有阅读完整的旧规范，所以可能有一个方法。否则，试试边距

---

网格项自动放置 有一些，但该功能从未在IE11中实现。（自动放置网格项现在在当前浏览器中是标准的）

因此，除非明确定义网格项的放置，否则它们将堆叠在单元格1,1中

使用

-ms网格行

和

-ms网格列

属性

---

费萨尔·胡尔希德和迈克尔·布已经给出了答案。
这只是试图让一个可能的解决方案更加明显

对于IE11及以下版本，您需要在父分区中启用grid的旧规范，例如body或类似的“grid”，如下所示：

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

.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;
}

---

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

支持

重复

功能 您仍然可以使用repeat功能，它只是隐藏在不同的语法后面。您必须编写

（1fr）[4]

，而不是编写

重复（4，1fr）

。就这样。 有关当前情况，请参阅本系列文章：

支撑栅间隙 除IE外，所有浏览器都支持网格间距。因此，您可以使用

@supports

at规则有条件地为所有新浏览器设置网格间距：

例如：

.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而完全放弃网格

使用自动刷新器

---

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

为了支持IE11的自动布局，我将

网格

转换为

表格

布局，每次我仅在一维中使用网格布局。我还使用了

margin

而不是

grid gap

---

结果是一样的，请查看如何根据CanIUse IE和Edge使用较旧版本的网格规范来执行此操作。这可能是问题所在。还指定IE 11和Edge>16部分支持它。alternative

-ms-*

属性是否映射到旧规范中的相同行为？如果没有，那么添加这些属性有什么意义呢？代码笔链接断开了：（这是有道理的。但是，我已经创建了

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

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

.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;
  }
}