Html CSS 网格布局即使使用前缀也无法在 IE11 中工作

CSS Grid Layout not working in IE11 even with prefixes

提问by Faisal Khurshid

I'm using following HTML markup for my grid.

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

The SCSS code is something like below:

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

Since I'm using auto-prefixer in my workflow it automatically adds all relevant properties with -msprefix. I can confirm it via inspect element.

由于我在我的工作流程中使用了自动前缀，它会自动添加所有相关的带有-ms前缀的属性。我可以通过检查元素确认它。

Now, the issue is this code works just fine in Chrome, Firefox and Opera, but when I open this page in Microsoft Edge or in IE 11 all grid items are overlapping each other at first cell. According to this sitethese browsers support CSS Grid layout with -msprefix. I've created a CodePen for this scenario.

现在，问题是这段代码在 Chrome、Firefox 和 Opera 中工作得很好，但是当我在 Microsoft Edge 或 IE 11 中打开此页面时，所有网格项在第一个单元格中都相互重叠。根据此站点，这些浏览器支持带-ms前缀的CSS 网格布局。我为这个场景创建了一个 CodePen。

CodePen Link

代码笔链接

Why is it not working?

为什么它不起作用？

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

回答by Michael Benjamin

IE11 uses an older version of the Grid specification.

IE11 使用旧版本的 Grid 规范。

The properties you are using don't exist in the older grid spec. Using prefixes makes no difference.

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

Here are three problems I see right off the bat.

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

---

---

repeat()

repeat()

The repeat()function doesn't exist in the older spec, so it isn't supported by IE11.

该repeat()功能在较旧的规范中不存在，因此 IE11 不支持。

You need to use the correct syntax, which is covered in another answer to this post, or declare all row and column lengths.

您需要使用正确的语法，这在这篇文章的另一个答案中有所介绍，或者声明所有行和列的长度。

Instead of:

代替：

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

Older spec reference: 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

span

The spankeyword doesn't exist in the older spec, so it isn't supported by IE11. You'll have to use the equivalent properties for these browsers.

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

Instead of:

代替：

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

Older spec reference: 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

grid-gap

The grid-gapproperty, as well as its long-hand forms grid-column-gapand grid-row-gap, don't exist in the older spec, so they aren't supported by IE11. You'll have to find another way to separate the boxes. I haven't read the entire older spec, so there may be a method. Otherwise, try margins.

该grid-gap属性及其长格式grid-column-gapandgrid-row-gap不存在于较旧的规范中，因此 IE11 不支持它们。您必须找到另一种方法来分隔盒子。我还没有阅读整个旧规范，所以可能有一种方法。否则，尝试边距。

---

---

grid item auto placement

网格项自动放置

There was some discussion in the old spec about grid item auto placement, but the feature was never implemented in IE11. (Auto placement of grid items is now standard in current browsers).

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

So unless you specifically define the placement of grid items, they will stack in cell 1,1.

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

Use the -ms-grid-rowand -ms-grid-columnproperties.

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

• CSS Grid auto placement in IE/EDGE
• CSS Grid not working in ie11 despite prefixes
• https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#automatic-placement-of-grid-items

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

回答by kumarharsh

Michael has given a very comprehensive answer, but I'd like to point out a few things which you can still do to be able to use grids in IE in a nearly painless way.

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

The repeatfunctionality is supported

repeat支持该功能

You can still use the repeat functionality, it's just hiding behind a different syntax. Instead of writing repeat(4, 1fr), you have to write (1fr)[4]. That's it. See this series of articles for the current state of affairs: https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/

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

Supporting grid-gap

支持网格间隙

Grid gaps are supported in all browsers except IE. So you can use the @supportsat-rule to set the grid-gaps conditionally for all new browsers:

除 IE 之外的所有浏览器都支持网格间隙。因此，您可以使用@supportsat-rule 为所有新浏览器有条件地设置网格间隙：

Example:

例子：

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

It's a little verbose, but on the plus side, you don't have to give up grids altogether just to support IE.

这有点冗长，但从好的方面来说，您不必为了支持 IE 而完全放弃网格。

Use Autoprefixer

使用自动前缀

I can't stress this enough - half the pain of grids is solved just be using autoprefixer in your build step. Write your CSS in a standards-complaint way, and just let autoprefixer do it's job transforming all older spec properties automatically. When you decide you don't want to support IE, just change one line in the browserlist config and you'll have removed all IE-specific code from your built files.

我不能强调这一点 - 网格的一半痛苦就解决了，只需在构建步骤中使用 autoprefixer。以符合标准的方式编写 CSS，让 autoprefixer 自动转换所有旧的规范属性。当您决定不支持 IE 时，只需更改浏览器列表配置中的一行，您就会从构建的文件中删除所有特定于 IE 的代码。

回答by leopold

The answer has been given by Faisal Khurshid and Michael_B already.
This is just an attempt to make a possible solution more obvious.

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

For IE11 and below you need to enable grid's older specification in the parent div e.g. body or like here "grid" like so:

对于 IE11 及以下，您需要在父 div 中启用网格的旧规范，例如 body 或像这里的“grid”，如下所示：

.grid-parent{display:-ms-grid;}

then define the amount and width of the columns and rows like e.g. so:

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

.grid-parent{
  -ms-grid-columns: 1fr 3fr;
  -ms-grid-rows: 4fr;
}

finally you need to explicitly tell the browser where your element (item) should be placed in e.g. like so:

最后你需要明确地告诉浏览器你的元素（项目）应该放在什么地方，例如：

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

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

回答by Thomas Webber

To support IE11 with auto-placement, I converted gridto tablelayout every time I used the grid layout in 1 dimension only. I also used margininstead of grid-gap.

为了支持 IE11 自动放置，我每次使用仅 1 维网格布局时都转换grid为table布局。我也用代替.margingrid-gap

The result is the same, see how you can do it here https://jsfiddle.net/hp95z6v1/3/

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