即使使用-ms前缀，CSS网格布局也不能在Edge和IE 11中工作 [英] CSS Grid Layout not working in Edge and IE 11 even with -ms prefix

问题描述

 < section class =grid>我的网格使用以下HTML标记。 
< 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; 
 
 
 
 
 
 $ p $因为我使用auto在我的工作流程中，它会自动添加所有与 -ms 前缀相关的属性。我可以通过检查元素来确认它。
 
 
 
现在，问题是此代码在Chrome，Firefox和Opera中运行良好，但是当我在Microsoft Edge中打开此页面或在IE 11中，所有网格项目在第一个单元处相互重叠。根据此网站，这些浏览器支持CSS网格布局，其中 -ms 前缀。我为这种情况创建了一个CodePen。
 
 
 
  CodePen Link  
 
 
 
为什么它不起作用？ 
 
 
 
 
 
  .grid {display：-ms-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;颜色：#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 = 网格 > < 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使用网格规范的旧版本。

更新：

• 边缘现在是最新的。问题中描述的问题不再适用。


• 问题在IE11中仍然存在，因为它支持旧版网格规范。 Chrome，Safari，Firefox和Opera使用网格规范的当前版本。

您的代码存在的问题是您正在使用旧网格规范中不存在的属性。使用前缀不会造成任何影响。

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

---

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; / *调整* / 
 grid-template-columns：repeat（4，1fr）; 
 -ms-grid-rows：270px 270px 270px 270px; / *调整* / 
 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
$ b

---

< h2> 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; / *调整* / 
 grid-row：span 2; 
} 
 .grid .grid-item.width-2x {
 -ms-grid-column-span：2; / *调整* / 
网格列：跨度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 code>，不存在于旧规格中，所以它们不受IE11的支持。你必须找到另一种方法来分开这些盒子。我没有阅读整个旧规格，所以可能有一种方法。否则，尝试利润。

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>

The SCSS code is something like below:

.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 -ms prefix. I can confirm it via inspect element.

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

解决方案

Edge and IE11 use an older version of the Grid specification.

Update:

• Edge is now current. The problem described in the question no longer applies.
• The problem persists in IE11 because it supports an older version of the Grid specification.
• Chrome, Safari, Firefox and Opera use the current version of the Grid specification.

The problem with your code is that you are using properties that don't exist in the older grid spec. Using prefixes makes no difference.

Here are three problems I see right off the bat.

---

repeat()

The repeat() notation doesn't exist in the older spec, so it isn't supported by IE11. You need to write in all row and column lengths for these browsers.

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

---

span

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.

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

---

grid-gap

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.

这篇关于即使使用-ms前缀，CSS网格布局也不能在Edge和IE 11中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！