即使使用-ms前缀,CSS网格布局也无法在Edge和IE 11中工作

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布局.我为这个场景创建了一个CodePen.

CodePen链接

为什么不起作用？

.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

Edge和IE11使用较旧版本的Grid规范.

更新:

• Edge现在是最新的.问题中描述的问题不再适用.
• 问题仍然存在于IE11中,因为它支持较旧版本的Grid规范.
• Chrome,Safari,Firefox和Opera使用当前版本的Grid规范.

代码的问题在于您使用的是旧版网格规范中不存在的属性.使用前缀没有区别.

以下是我看到的三个问题.

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支持.你必须找到另一种方法来分开盒子.我没有读过整个旧规范,所以可能有一种方法.否则,尝试边距.

Answer 2

迈克尔给出了一个非常全面的答案，但是我想指出一些事情，您仍然可以做一些事情，以便能够以几乎轻松的方式在IE中使用网格。

repeat支持该功能

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

支持网格间隙

除IE外，所有浏览器均支持网格间距。因此，您可以使用@supports规则为所有新浏览器有条件地设置网格间隙：

例：

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

使用自动前缀

我不能太强调-只需在构建步骤中使用autoprefixer即可解决网格的一半痛苦。以符合标准的方式编写CSS，然后让autoprefixer来完成自动转换所有旧规范属性的工作。当您决定不想支持IE时，只需在browserlist配置中更改一行，就可以从构建文件中删除所有IE专用代码。

Answer 3

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

对于IE11及以下版本,您需要在父div中启用网格的旧规范,例如正文或类似这里的"网格",如下所示:

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