Question

IE 11中的Css Grid中的项目相互叠加。一切都在Chrome，FF和Safari中运行良好，但不是IE 11.

铬：

IE：

代码：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

Answer 1

首先。坏消息是 - 它也发生在 Edge 上。所以这对IE和Edge浏览器来说是个问题，因为Edge现在似乎是非常现代的浏览器（ EDIT ：MS Edge最终完全支持CSS网格[版本16+]）。根据微软documentation它应该可以正常工作......但事实并非如此。已经尝试了一些-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指令的更多信息 - here。不幸的是，你不能使用@supports来捕获IE，因为它不支持它 - caniuse。我们选择Edge -ms-ime-align属性，因为此属性仅受Edge支持，因此可以安全使用它。

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

Answer 2

在您的情况下，CSS网格不是一个好的解决方案。 Flexbox更短，开箱即用，可以在IE / Edge中工作（带有一些Autoprefixer和一些小的手动调整）。

但是，有一种解决方案，仅使用CSS Grid工具即可分散网格元素，从而避免nth-child和@media IE检测。

Here是非常详细的说明。

基本上，您必须通过grid-template定义网格，然后通过grid-area明确指定每个网格元素的位置。

本文非常详细地阐明了这一点，包括您必须使用的供应商前缀。

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

2 个答案: