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或邊緣網格重疊像這樣：
對此的任何想法？