即使带有前缀,CSS 网格布局也无法在 IE11 中工作 [英] CSS Grid Layout not working in IE11 even with prefixes

查看:73
本文介绍了即使带有前缀,CSS 网格布局也无法在 IE11 中工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我的网格使用以下 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 代码如下所示:

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

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

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

有一些 旧规范中关于网格项自动放置的讨论,但该功能从未在 IE11 中实现.(网格项的自动放置现在是当前浏览器的标准配置).

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

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

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆