Question

我在使CSS网格正常工作时遇到问题。据我所知，我正在遵循IE10 / 11规范的规范。我的最初研究使我想到：CSS Grid Layout not working in Edge and IE 11 even with -ms prefix-并尝试实施建议的更改。

我的代码如下：

.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中查看此标记时，似乎所有内容都绝对位于同一位置。根据所附的答案，我是：

使用供应商前缀
不依赖auto进行MS后备
不使用repeat()
明确说明每个项目的位置。

为了完全支持CSS网格的IE规范，需要进行哪些具体更改？还是建议使用@supports CSS查询？

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>

具有IE11规格的CSS网格-网格自身折叠

1 个答案: