CSS 网格 - IE 11 重叠

Question

这个问题之前在这里被问过，甚至被标记为重复，但是没有任何解释或答案可以真正解决提问者的问题，所以我再试一次，因为每个人都说 IE 11 支持 css-grid 如果使用正确。

我有最基本的 CSS-Grid，其中我也使用 -ms- 前缀，但出于某种原因，在 IE 11 中，Grid-Elements 将被放置在彼此之上而不是预期的行为。

这是一个基本网格，您可以在其中看到问题

.grid {
  display: -ms-grid;
  display: grid;

  -ms-grid-columns: 50% 50%;
  grid-template-columns: 1fr 1fr;
}

.cell {
  border: 1px solid black;
}

http://jsbin.com/wuxaridabo/1/edit

Answer 1

您需要使用 -ms-grid-row 和 -ms-grid-column 手动定位每个元素

.calendar > div:nth-of-type(1){
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.calendar > div:nth-of-type(2){
    -ms-grid-row: 1;
    -ms-grid-column: 2;
}

Answer 2

尝试使用这个 PostCSS 自动前缀：

https://autoprefixer.github.io/

CSS 网格 - IE 11 重叠

CSS Grid - IE 11 Overlap

css

internet-explorer-11

css-grid