具有 IE11 规范的 CSS Grid - 网格自身折叠答案

【问题标题】：CSS Grid with IE11 specs - grid collapses on itself具有 IE11 规范的 CSS Grid - 网格自身折叠
【发布时间】：2018-07-30 15:29:55
【问题描述】：

我在让 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 查询？

【问题讨论】：

标签： html css internet-explorer css-grid

【解决方案1】：

更改显示设置to display: grid -ms-grid; 并将new 类添加到每个类使其不会崩溃参见sn-p：在 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>

【讨论】：

它只是将所有内容放在一列中 - 我需要维护网格布局。
已编辑以维护列，但它在第一列上方放置了一些奇怪的空白区域仍在处理它。
看看那个。
您的页面上是否有
元素？使用 Modernizer.js 强制 IE 使用块渲染或使用 div 而不是
例如。
@RobParsons 很棒的提示！不，我不知道，但我以后会记得的。