为什么 css 网格在 IE 和 Edge 中不工作？

Question

我正在做一个结构如下的网格：

我有下一个非常基本的代码：https://codepen.io/anon/pen/PEpYoy

.grid-list {
 padding: 0;
 display: -ms-grid;
 display: grid;
 list-style: none;
 -ms-grid-columns: 1fr 1fr 1fr 1fr;
 grid-template-columns: 1fr 1fr 1fr 1fr;
 grid-auto-rows: 1fr;
 grid-gap: 0.625rem;
}

.grid-list li a {
  background-color: 
 border-width: 1px;
 border-style: solid;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
 flex-direction: column;
 height: 100%;
 transition: border-color .2s ease-out;
 padding: 3px;
 padding: 0.1875rem;
}

<ul class="grid-list">
 <li>
  <a href="http://www.google.com/">
   <h3>1</h3>
  </a>
 </li>
 <li>
  <a href="http://www.google.com/">
   <h3>2</h3>
  </a>
 </li>
 <li>
  <a href="http://www.google.com/">
   <h3>3</h3>
  </a>
 </li>
 <li>
  <a href="http://www.google.com/">
   <h3>4</h3>
  </a>
 </li>
 <li>
  <a href="http://www.google.com/">
   <h3>5</h3>
  </a>
 </li>
 <li>
  <a href="http://www.google.com/">
   <h3>6</h3>
  </a>
 </li>
 <li>
  <a href="http://www.google.com/">
   <h3>7</h3>
  </a>
 </li>
 <li>
  <a href="http://www.google.com/">
   <h3>8</h3>
  </a>
 </li>
</ul>

如果我们在 chrome/firefox 中看到它，它工作正常，但如果我们在 IE 或 Edge 中打开它，网格将像这样重叠：

对此有什么想法吗？

Answer 1

CSS IE v11 and Edge 15 仅部分支持网格。此结构是高度实验性的，因此请谨慎使用。

人们已经找到了使用 flex 作为后备方案的方法，但即使是这种解决方案对于较旧的浏览器来说也是不稳定的。 codepen demo

@supports not (display: grid) {
.grid {
    display: flex;
    flex-flow: row wrap;
    ...
}

为什么 css 网格在 IE 和 Edge 中不工作？

Why css grid is not working in IE & Edge?

html

css

internet-explorer

css-grid