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

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在为网格使用以下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中运行正常，但是当我在MicrosoftEdge或IE11中打开此页面时，所有网格项在第一个单元格处都相互重叠。根据该站点的介绍，这些浏览器支持带-ms前缀的CSS网格布局。我已经为这种情况创建了一个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>

回答：

IE11使用较旧版本的Grid规范。

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

我立即看到了三个问题。

回答：

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

回答：

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

回答：

该grid-gap属性及其长期形式grid-column-gap和grid-row-

gap在较早的规范中不存在，因此IE11不支持它们。您将必须找到另一种分隔框的方法。我还没有阅读完整的旧规范，因此可能有一种方法。否则，请尝试边距。

回答：

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

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

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

以上是 CSS网格布局即使在带有前缀的IE11中也不起作用 的全部内容， 来源链接： utcz.com/qa/413197.html

回到顶部