为什么 css 网格在 IE 和 Edge 中不起作用？ [复制]答案

【问题标题】：Why css grid is not working in IE & Edge? [duplicate]为什么 css 网格在 IE 和 Edge 中不起作用？ [复制]
【发布时间】：2018-06-08 10:27:27
【问题描述】：

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

我有下一个非常基本的代码：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 中打开它，网格会像这样重叠：

对此有什么想法吗？

【问题讨论】：

标签： html css internet-explorer css-grid

【解决方案1】：

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

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

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

【讨论】：