为什么我的CSS Grid不能在IE 11中正确渲染？

Question

我有一个简单的网格：

IAttachmentSecurity::IsAttachmentBlocked()

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;
}

我试图相应地添加旧的，特定于Microsoft的CSS <div class="grid"> <div class="header">header</div> <div class="navbar">navbar</div> <div class="sidebar">sidebar</div> <div class="content">content</div> </div>前缀的网格属性，因此它也应该在IE 11中也可以使用。相反，我得到的是：

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

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

有人能看到我缺少的使IE 11中的这种简单的网格工作吗？

Answer 1

好的，我能够解决问题。

1. display: -ms-grid;在网格容器中丢失。道具发给@Michael_B以发现此关键错误。
2. 在IE 11上，列/行定义的外观auto似乎不受支持/解释不同，我只是将其替换为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开发工具中对其进行检查。

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

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