0
나는이 같은 구조 격자를하고 있어요 : 우리가 그것을 볼 경우 https://codepen.io/anon/pen/PEpYoy왜 CSS 그리드가 IE 및 Edge에서 작동하지 않습니까?
.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>:
나는 다음 아주 기본적인 코드를 chrome/firefox 잘 작동하지만 IE 나 Edge에서 그리드가 다음과 같이 겹쳐져있는 경우 :
어떤 생각인가요?