即使有前缀，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>

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 中打开此页面时，所有网格项在第一个单元格处都相互重叠。根据这个网站 http://caniuse.com/#feat=css-grid这些浏览器支持 CSS 网格布局-ms字首。我已经为这个场景创建了一个 CodePen。

代码笔链接 https://codepen.io/imfaisal/full/rzdzqN/

为什么它不起作用？

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

IE11 使用旧版本的网格规范 https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/.

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

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

repeat()

The repeat()旧版本规范中不存在该函数，因此 IE11 不支持该函数。

您需要使用正确的语法，这在这篇文章的另一个答案 https://stackoverflow.com/a/53427229/3597276，或声明所有行和列的长度。

代替：

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

Use:

.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 https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#grid-repeating-columns-and-rows

span

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

Use:

.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 https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#grid-row-span-and-grid-column-span

grid-gap

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

网格项目自动放置

有一些旧规范中关于网格项自动放置的讨论 https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#automatic-placement-of-grid-items，但该功能从未在 IE11 中实现。 （网格项的自动放置现在是当前浏览器的标准配置）。

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

Use the -ms-grid-row and -ms-grid-column特性。

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