CSS网格布局：支持IE11的grid-area

Question

有人能告诉我如何使这个例子在ie11中工作吗？我查看了文档，-ms-前缀没有帮助

#page {
  display: -ms-grid;
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas: "head head" "nav  main" "nav  foot";
  -ms-grid-rows: 50px 1fr 30px;
      grid-template-rows: 50px 1fr 30px;
  -ms-grid-columns: 150px 1fr;
      grid-template-columns: 150px 1fr;
}

#page > header {
  grid-area: head;
  background-color: #8ca0ff;
}

#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}

#page > main {
  grid-area: main;
  background-color: #ffff64;
}

#page > footer {
  grid-area: foot;
  background-color: #8cffa0;
}

示例：https://jsfiddle.net/9bp1ffs1/

- Pavel

---

请在此处查看答案和评论：https://dev59.com/h1cO5IYBdhLWcg3wchQC - Michael Benjamin

我没有看到关于grid-area的任何评论。在旧规范中，我们有这个属性 https://www.w3.org/TR/css-grid-1/#propdef-grid-area - Pavel

Answer 1

这里有两个具体问题。首先，IE10/11和所有Edge版本直到v15都不支持网格区域(Grid Areas)。对于那些浏览器的任何代码必须使用网格线(Grid Lines)代替(这很遗憾，因为对大多数人来说网格区域更直观)。其次，IE11不完全支持主要的HTML标签。在这种情况下，IE11将无法在网格布局中正确放置或样式化一个主标签。

这里是您示例的可行版本，使用Grid Lines适用于IE/Edge和W3C模型: https://jsfiddle.net/FilmFiddler/q074gpx8/4/

#page {
  display: -ms-grid;
  display: grid;
  width: 100%;
  height: 250px;
  -ms-grid-rows: 50px 1fr 30px;
  grid-template-rows: 50px 1fr 30px;
  -ms-grid-columns: 150px 1fr;
  grid-template-columns: 150px 1fr;
}
#page > header {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  -ms-grid-row: 1;
  grid-column: 1/3;
  grid-row: 1;
  background-color: #8ca0ff;
}
#page > nav {
  -ms-grid-column: 1;
  -ms-grid-row: 2;
  -ms-grid-row-span: 2;
  grid-column: 1;
  grid-row: 2/4;
  background-color: #ffa08c;
}
#page #main {
  -ms-grid-column: 2;
  -ms-grid-row: 2;
  grid-column: 2;
  grid-row: 2;
  background-color: #ffff64;
}
#page > footer {
  -ms-grid-column: 2;
  -ms-grid-row: 3;
  grid-column: 2;
  grid-row: 3;
  background-color: #8cffa0;
}

HTML, with main tag replaced by a div:

<section id="page">
  <header>Header</header>
  <nav>Navigation</nav>
  <div id="main">Main area</div>
  <footer>Footer</footer>
</section>

一般来说，IE和Edge使用的旧版CSS网格模型与当前的W3C实现相当不同。除了需要-ms前缀外，属性命名存在相当大的差异，而且不支持网格区域或网格间隙。此外，也不支持fit_content()和repeat()等函数，尽管后者有一个特定于Microsoft的实现。

MSDN页面中提到了在使用IE/Edge的旧版网格模型中使用网格线： https://msdn.microsoft.com/en-us/library/hh673533(v=vs.85).aspx

这里讨论了IE/Edge和W3C模型之间的区别，包括属性的差异： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement

- FilmFiddler

---

3年过去了，你的回答仍然帮助着我们这些不得不支持IE的可怜开发人员。 - coagmano