0
我做一个网格，像这样的结构：为什么css网格在IE和Edge中不起作用？
我的下一个非常基本的代码：https://codepen.io/anon/pen/PEpYoy
.grid-list {
\t padding: 0;
\t display: -ms-grid;
\t display: grid;
\t list-style: none;
\t -ms-grid-columns: 1fr 1fr 1fr 1fr;
\t grid-template-columns: 1fr 1fr 1fr 1fr;
\t grid-auto-rows: 1fr;
\t grid-gap: 0.625rem;
}
.grid-list li a {
background-color:
\t border-width: 1px;
\t border-style: solid;
\t display: -webkit-box;
\t display: -ms-flexbox;
\t display: flex;
\t -webkit-box-orient: vertical;
\t -webkit-box-direction: normal;
\t -ms-flex-direction: column;
\t flex-direction: column;
\t height: 100%;
\t transition: border-color .2s ease-out;
\t padding: 3px;
\t padding: 0.1875rem;
}<ul class="grid-list">
\t <li>
\t \t <a href="http://www.google.com/">
\t \t \t <h3>1</h3>
\t \t </a>
\t </li>
\t <li>
\t \t <a href="http://www.google.com/">
\t \t \t <h3>2</h3>
\t \t </a>
\t </li>
\t <li>
\t \t <a href="http://www.google.com/">
\t \t \t <h3>3</h3>
\t \t </a>
\t </li>
\t <li>
\t \t <a href="http://www.google.com/">
\t \t \t <h3>4</h3>
\t \t </a>
\t </li>
\t <li>
\t \t <a href="http://www.google.com/">
\t \t \t <h3>5</h3>
\t \t </a>
\t </li>
\t <li>
\t \t <a href="http://www.google.com/">
\t \t \t <h3>6</h3>
\t \t </a>
\t </li>
\t <li>
\t \t <a href="http://www.google.com/">
\t \t \t <h3>7</h3>
\t \t </a>
\t </li>
\t <li>
\t \t <a href="http://www.google.com/">
\t \t \t <h3>8</h3>
\t \t </a>
\t </li>
</ul>，如果我们看到它在铬/火狐它工作正常，但如果我们打开它在IE或边缘网格重叠像这样：
对此的任何想法？