带有IE11规范的CSS网格-网格自行折叠

Question

我在让CSS网格工作时遇到问题。据我所知，我正在遵循IE10/11规范的规范。我最初的研究让我发现：即使使用-ms前缀，CSS网格布局在Edge和IE 11中也不起作用，并尝试实现建议的更改。

我的代码如下：

.filter-item-grid {
	display: grid;
	display: -ms-grid;
grid-template-columns: auto auto;
-ms-grid-columns: 267px 267px;
-ms-grid-rows: 1fr;
}

<div class="filter-item-grid">
<div class="letter-list__filter-item">
<h3 class="letter-list__filter-title">
<a href="#">Headline</a>
</h3>
<p>Sub headline</p>
</div>
<div class="letter-list__filter-item">
<h3 class="letter-list__filter-title">
<a href="#">Headline</a>
</h3>
<p>Sub headline</p>
</div>
<div class="letter-list__filter-item">
<h3 class="letter-list__filter-title">
<a href="#">Headline</a>
</h3>
<p>Sub headline</p>
</div>
<div class="letter-list__filter-item">
<h3 class="letter-list__filter-title">
<a href="#">Headline</a>
</h3>
<p>Sub headline</p>
</div>
</div>

在IE中查看此标记时，看起来好像所有内容都完全位于同一位置。根据所附答案，我是：

1. 使用供应商前缀
2. 不依赖auto进行MS回退
3. 不使用repeat()
4. 明确说明每个项目的位置

要完全支持CSS网格的IE规范，具体需要更改什么？还是建议使用@supportsCSS查询？

Answer 1

更改显示设置to display: grid -ms-grid;并将new类添加到每个设置中使其不会塌陷，请参见片段：在IE11和Chrome v67.0.3396.99中进行了测试。

.filter-item-grid {
display: grid -ms-grid;
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2; 
}
.new{
vertical-align: top;
padding-top:10px;
margin:0;
}

<div class="filter-item-grid">
<div class="letter-list__filter-item new">
<h3 class="letter-list__filter-title new">
<a href="#">Headline</a>
</h3>
<p>Sub headline</p>
</div>
<div class="letter-list__filter-item new">
<h3 class="letter-list__filter-title new">
<a href="#">Headline</a>
</h3>
<p>Sub headline</p>
</div>
<div class="letter-list__filter-item new">
<h3 class="letter-list__filter-title new">
<a href="#">Headline</a>
</h3>
<p>Sub headline</p>
</div>
<div class="letter-list__filter-item new">
<h3 class="letter-list__filter-title new">
<a href="#">Headline</a>
</h3>
<p>Sub headline</p>
</div>
</div>