IE中Css Grid中的项目互相叠加
IE 11中Css Grid中的项目相互叠加。一切都在Chrome,FF和Safari浏览器工作正常,但不是IE 11IE中Css Grid中的项目互相叠加
代码:
.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来解决它? 将不胜感激任何帮助。
首先。坏消息是 - 它发生在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。
请添加足够的代码(包括图像)来重现问题。 –