Question

如何支持IE10和/或IE11的网格布局？

到目前为止，我只发现-ms-前缀应该可以解决问题，但我只能在Edge浏览器上使用它。

我试图查看Microsoft文档和MDN网络，但无法找到任何帮助。

您可以在下面找到我使用的代码：

@supports (display:grid) {
  .App-body {
    display: grid;
    grid-template-columns: 300px auto 300px;
    grid-template-areas: "navbar  navbar  navbar" "leftside content content";
  }

  .leftside {
    grid-area: leftside;
    /*align-content: left;*/
  }

  .rightside {
    grid-area: rightside;
    /*align-content: right;*/
  }

  .content {
    grid-area: content;
    /*align-content: center;*/
  }

  .navbar {
    grid-area: navbar;
  }
}

@supports (display:-ms-grid) {
  .App-body {
    display: -ms-grid;
    -ms-grid-columns: 300px auto 300px;
  }

  .leftside {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    /*align-content: left;*/
  }

  .rightside {
    -ms-grid-row: 2;
    -ms-grid-column: 3;
    /*align-content: right;*/
  }

  .content {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
  }

  .navbar {
    -ms-grid-row: 1;
    -ms-grid-column-span: 3;
  }
}

Answer 1

@supports Internet Explorer不支持CSS规则，因此您需要将其删除才能使其正常工作。

规则grid-template-columns: 300px auto 300px;和-ms-grid-columns: 300px auto 300px;也不等同于IE / Edge和支持网格的其他浏览器：

如果您希望列占用剩余的所有内容，请将auto替换为1fr 空间。
如果您希望按内容定义列宽，请将display: grid替换为display: inline-grid以获取网格容器（display: -ms-grid for IE \ Edge）。

顺便说一句，您可以删除IE / Edge的-ms-grid-column: 1和-ms-grid-row: 1，因为它是IE / Edge的默认值。 IE / Edge没有网格项自动放置，默认情况下，IE / Edge会堆叠第一个单元格中的所有网格项。

CSS Grid语法支持IE10 / 11

1 个答案: