代码之家 › 专栏 › 技术社区 › Faisal Khurshid

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

css-grid internet-explorer-11 css html

Faisal Khurshid · 技术社区 · 7 年前

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

.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 前缀我可以通过检查元件进行确认。

this site 这些浏览器支持CSS网格布局 -ms 前缀我为这个场景创建了一个代码笔。

CodePen Link

为什么它不起作用?

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

4 回复 | 直到 5 年前

137

Michael Benjamin William Falcon 5 年前

IE11使用 older version of the Grid specification .

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

`repeat()`

这个 重复()

another answer to this post ,或声明所有行和列长度。

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

这个 跨度

.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-column-gap grid-row-gap ,在旧的规范中不存在,因此IE11不支持它们。你必须找到另一种方法来分开盒子。我还没有阅读完整的旧规范,所以可能有一种方法。否则,请尝试边距。

有一些 discussion in the old spec about grid item auto placement ,但该功能从未在IE11中实现。(自动放置网格项现在在当前浏览器中是标准的)。

使用 -ms-grid-row 和 -ms-grid-column

kumarharsh 6 年前

Michael给出了一个非常全面的答案,但我想指出一些你仍然可以做的事情,以便能够以一种近乎无痛的方式在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的代码。

leopold 6 年前

这只是试图让可能的解决方案更加明显。

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

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

Thomas Ducrot Tobias J 5 年前

为了支持具有自动放置功能的IE11,我转换了 grid table 每次我在中使用网格布局时的布局 仅1个维度 margin 而不是 grid-gap

结果是一样的,看看你能在这里做什么 https://jsfiddle.net/hp95z6v1/3/

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

repeat()

span