CSS网格布局即使带有前缀也不能在IE11中工作

Question

CSS网格布局即使带有前缀也不能在IE11中工作

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

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

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

代码笔链接

为什么不起作用？

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

Answer 1

这只是试图使可能的解决办法更加明显。对于IE11及以下版本，您需要在父div中启用网格的旧规范，例如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;}