为什么css网格在IE＆amp;边缘？

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

IE v11 and Edge 15仅部分支持CSS网格。这种结构具有很强的实验性，因此请谨慎使用。

人们已经找到了使用flex作为后备的方法，但即使这个解决方案对于旧版浏览器也是易变的。 codepen demo

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