IE 中 Css 网格中的项目相互叠加

Question

IE 11 中 Css 网格中的项目相互叠加。在 Chrome、FF 和 Safari 中一切正常，但在 IE 11 中不正常。

Chrome:

即：

代码：

.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 现在似乎是非常现代的浏览器（EDIT：MS Edge 终于完全支持 CSS 网格 [版本 16+ ]).根据 Microsoft documentation 的说法，它应该可以正常工作……但事实并非如此。已经尝试了一些 -ms 前缀修复，但它仍然坏了，看起来真的很糟糕。似乎 css grid 在这些浏览器上没有很好的实现。让我们想想如何解决这个问题，让 IE/Edge 用户的页面看起来没问题。

基本问题解释

项目相互叠加，因为在 IE 和 Edge 网格中，项目总是堆叠在第一个单元格中。如果您确切知道项目的数量，您可以使用 css 网格属性:

之一轻松修复它

.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 . Unfortunately you can't use @supports to catch the IE because it doesn't support it - caniuse。我们通过 -ms-ime-align 属性选择 Edge，因为此属性仅受 Edge 支持，因此可以安全使用它。

希望对您有所帮助。这是工作 DEMO.

Answer 2

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

然而，有一种解决方案可以仅使用 CSS 网格工具来展开网格元素，以避免 nth-child 和 @media IE 检测。

Here解释的很详细

基本上您必须通过 grid-template 定义网格，然后通过 grid-area.

明确分配每个网格元素位置

这篇文章非常详细地说明了您必须使用的供应商前缀。

IE 中 Css 网格中的项目相互叠加

Items in Css Grid in IE superimposed on each other

css

internet-explorer

css-grid