CSS网格布局即使在带有前缀的情况下也无法在IE11中使用 [英] CSS Grid Layout not working in IE11 even with prefixes

问题描述

我正在为网格使用以下HTML标记.

I'm using following HTML markup for my grid.

<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前缀的相关属性.我可以通过检查元素确认它.

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

现在，问题在于此代码在Chrome，Firefox和Opera中运行正常，但是当我在Microsoft Edge或IE 11中打开此页面时，所有网格项在第一个单元格处都相互重叠.根据此网站，这些浏览器支持前缀为-ms的CSS网格布局.我已经为这种情况创建了一个CodePen.

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 site these browsers support CSS Grid layout with -ms prefix. I've created a CodePen for this scenario.

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使用网格规范的旧版本.

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

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()功能在较早的规范中不存在，因此IE11不支持该功能.

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

您需要使用正确的语法(对此信息的另一种回答中所述)，或声明所有行和列长.

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

代替:

.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关键字在较早的规范中不存在，因此IE11不支持该关键字.您必须为这些浏览器使用等效的属性.

The span keyword 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.

代替:

.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不支持它们.您将必须找到另一种分隔框的方法.我还没有阅读完整的旧规范，所以可能有一种方法.否则，请尝试边距.

The grid-gap property, as well as its long-hand forms grid-column-gap and 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.

有些

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

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

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

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

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

• 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

这篇关于CSS网格布局即使在带有前缀的情况下也无法在IE11中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！