为什么我的 CSS Grid 不能在 IE 11 中正确呈现？答案

【问题标题】：Why isn't my CSS Grid rendering properly in IE 11?为什么我的 CSS Grid 不能在 IE 11 中正确呈现？
【发布时间】：2019-08-19 18:08:12
【问题描述】：

我有这个简单的网格：

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-prefixed 网格属性，因此它应该也可以在 IE 11 中工作。我得到的是这样的：

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

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

有没有人看到我在 IE 11 中使这个简单的网格工作缺少什么？

【问题讨论】：

@Michael_B 我知道当前哪些 CSS 网格属性不受支持 - 我应该尽可能地包含必要的 IE 11 -ms-grid-前缀样式。
@Michael_B 也许netrenderer.de 是一个选项？您可以在此处粘贴调试 URL：s.codepen.io/connexo/debug/BaBLpbx/yYryLJBqwdPM。 browserling.com/browse/win/10/ie/11/… 也可能有效。
请注意，您在容器上缺少display: -ms-grid。

标签： css internet-explorer-11 css-grid

【解决方案1】：

好的，我能够解决问题。

网格容器上缺少display: -ms-grid;。道具发给 @Michael_B 以发现这个关键错误。
从外观上看，auto 的列/行定义似乎在 IE 11 上不受支持/解释不同。我只是将其替换为 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>

【讨论】：

【解决方案2】：

您的 IE 可能正在使用较低版本来呈现您的页面，您可以在 IE 开发工具中检查它。

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

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

【讨论】：