IE中Css Grid中的项目相互叠加

Question

IE 11中的Css Grid中的项目相互叠加.在Chrome,FF和Safari中,一切都运行正常,但不是IE 11.

铬:

IE:

码:

.content-item__image {
  height: 210px;
  width: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.content-item__description {
  padding: 16px 28px;
}

.content-grid {
  display: grid;
  display: -ms-grid;
  grid-template-columns: 1fr 1fr 1fr;
  -ms-grid-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  -ms-grid-rows: 1fr 1fr;
  grid-gap: 1rem;
}

<div class="content-grid">
  <div class="content-item">
    <div class="content-item__backdrop"></div>
    <div class="content-item__image"></div>
    <div class="content-item__description">Cos’è il Texas holdem</div>
  </div>
  <div class="content-item">
    <div class="content-item__backdrop"></div>
    <div class="content-item__image"></div>
    <div class="content-item__description">Cos’è il Texas holdem</div>
  </div>
  <div class="content-item">
    <div class="content-item__backdrop"></div>
    <div class="content-item__image"></div>
    <div class="content-item__description">Cos’è il Texas holdem</div>
  </div>
  <div class="content-item">
    <div class="content-item__backdrop"></div>
    <div class="content-item__image"></div>
    <div class="content-item__description">Cos’è il Texas holdem</div>
  </div>
  <div class="content-item">
    <div class="content-item__backdrop"></div>
    <div class="content-item__image"></div>
    <div class="content-item__description">Cos’è il Texas holdem</div>
  </div>
  <div class="content-item">
    <div class="content-item__backdrop"></div>
    <div class="content-item__image"></div>
    <div class="content-item__description">Cos’è il Texas holdem</div>
  </div>
</div>

可能是什么问题以及解决问题的方法？将不胜感激任何帮助.

Answer 1

首先.坏消息是 - 它也发生在Edge上.因此,IE和Edge浏览器的问题并不好,因为Edge现在似乎是非常现代的浏览器(编辑:MS Edge最终完全支持CSS网格[版本16+]).根据Microsoft 文档,它应该可以正常工作......但事实并非如此.尝试了一些-ms前缀修复,但它仍然被打破,看起来非常糟糕.css grid这些浏览器似乎没有很好的实现.让我们考虑如何解决这个问题,因此IE/Edge用户的页面看起来不错.

基本问题解释

这些项目相互叠加,因为在IE和Edge网格项目始终堆叠在第一个单元格中.如果您确切知道项目的数量,则可以使用css grid属性之一轻松修复它:

.content-item:nth-child(2) {
    -ms-grid-column: 2;
}

.content-item:nth-child(3) {
    -ms-grid-column: 3;
}

等等......问题是当内容是动态的,你不知道将在网格父元素中出现多少项.

HTML中的条件注释

我曾经使用条件注释来为IE浏览器提供特殊的CSS文件.

<!--[if IE ]>
  <link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->

但它不会帮助你了.自IE10以来,Internet Explorer和Edge 都不支持 HTML中的条件语句.太糟糕了,这个解决方案只涵盖IE9及以下版本.

工作解决方案!(仅限CSS)

解决Microsoft浏览器问题的一种方法是使用@supports或@media查询来捕获正确的浏览器.

只获得IE使用

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    Grid fixes for IE goes here...
}

要仅获取Edge浏览器,请使用

@supports (-ms-ime-align: auto) {
    Grid fixes for Edge goes here...
}

更多关于@supports指令 - 这里.不幸的是你不能使用@supports来捕获IE,因为它不支持它 - caniuse.我们选择Edge by -ms-ime-align属性,因为Edge仅支持此属性,因此使用它是安全的.

希望能帮助到你.这是工作的DEMO.