为什么我的 CSS 网格不能在 IE 11 中正确呈现？

Question

我有这个简单的网格：

body { margin: 0; }

.grid {
  -ms-grid-columns: 200px auto;
  -ms-grid-rows: 54px 53px auto;
  display: grid;
  height: 100vh;
  grid-template-areas:
    "header header"
    "navbar navbar"
    "sidebar content";
  grid-template-columns: 200px auto;
  grid-template-rows: 54px 53px auto;
}

.header {
  grid-area: header;
  -ms-grid-column: 1;
  -ms-grid-row: 1;
  -ms-grid-column-span: 2;
  background-color: orange;
}

.navbar {
  grid-area: navbar;
  -ms-grid-column: 1;
  -ms-grid-row: 2;
  -ms-grid-column-span: 2;
  background-color: lightgreen;
}

.sidebar {
  grid-area: sidebar;
  -ms-grid-column: 1;
  -ms-grid-row: 3;
  background-color: #eee;
}

.content {
  grid-area: content;
  -ms-grid-column: 2;
  -ms-grid-row: 3;
  background-color: yellow;
}

<div class="grid">
  <div class="header">header</div>
  <div class="navbar">navbar</div>
  <div class="sidebar">sidebar</div>
  <div class="content">content</div>
</div>

我已尝试相应地添加旧的 Microsoft 特定 CSS -ms-grid-前缀网格属性，因此它应该也适用于 IE 11。我得到的是：

这是 IE11 调试代码笔：https://s.codepen.io/connexo/debug/BaBLpbx/yYryLJBqwdPM

这是其他浏览器的完整代码笔：https://codepen.io/connexo/pen/BaBLpbx

有人看到我在 IE 11 中使这个简单的网格工作所缺少的东西吗？

Answer 1

好的，我能够解决问题。

display: -ms-grid;。道具转到@Michael_B 以发现这个关键错误。
在 IE 11 上，column/row-definitions 的 auto 似乎与 unsupported/interpreted 不同。我只是将其替换为 1fr。

body { margin: 0; }

.grid {
  -ms-grid-columns: 200px 1fr;
  -ms-grid-rows: 54px 53px 1fr;
  display: grid;
  display: -ms-grid;
  height: 100vh;
  grid-template-areas:
    "header header"
    "navbar navbar"
    "sidebar content";
  grid-template-columns: 200px auto;
  grid-template-rows: 54px 53px auto;
}

.header {
  grid-area: header;
  -ms-grid-column: 1;
  -ms-grid-row: 1;
  -ms-grid-column-span: 2;
  background-color: orange;
}

.navbar {
  grid-area: navbar;
  -ms-grid-column: 1;
  -ms-grid-row: 2;
  -ms-grid-column-span: 2;
  background-color: lightgreen;
}

.sidebar {
  grid-area: sidebar;
  -ms-grid-column: 1;
  -ms-grid-row: 3;
  background-color: #eee;
}

.content {
  grid-area: content;
  -ms-grid-column: 2;
  -ms-grid-row: 3;
  background-color: yellow;
}

<div class="grid">
  <div class="header">header</div>
  <div class="navbar">navbar</div>
  <div class="sidebar">sidebar</div>
  <div class="content">content</div>
</div>

Answer 2

您的 IE 可能使用较低版本来呈现您的页面，您可以在 IE Dev Tools 中检查它。

要解决此问题，请尝试在您的 HTML 页面中添加此元标记

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

为什么我的 CSS 网格不能在 IE 11 中正确呈现？

Why isn't my CSS Grid rendering properly in IE 11?

css

internet-explorer-11

css-grid