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>

可能是什么问题和w ays来解决它？ 将不胜感激任何帮助。

Answer 1

首先。坏消息是 - 它发生在Edge。所以这对IE和Edge浏览器来说是一个问题，因为Edge现在看起来已经非常现代化了。根据微软documentation它应该工作正常...但它不。已经尝试了一些-ms前缀修补程序，但它仍然损坏，看起来非常糟糕。看起来css grid在这些浏览器上没有很好的实现。让我们考虑一下如何解决这个问题，这样页面对于IE/Edge用户来说看起来就OK了。

---

基本问题说明

的项目叠加在彼此因为在IE和边缘栅格项总是堆积在第一小区。

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

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

等等... 问题是，当内容是动态的，你不知道有多少项目：如果你确切地知道一些项目，您可以在使用CSS网格属性的一个固定伊斯利将出现在网格父元素中。在HTML

---

条件注释我曾经使用条件注释担任特殊的CSS文件仅适用于IE浏览器。

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

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

---

工作解决方案！ （仅限CSS）

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

要获得唯一IE使用

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

只获取边缘浏览器，使用

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

更多@supports指令 - here。不幸的是，你不能使用@supports来捕捉IE，因为它不支持它 - caniuse。 我们选择Edge by -ms-ime-align属性，因为此属性仅由Edge支持，因此可以安全地使用它。

---

希望它有帮助。 这里是工作DEMO。