CSS网格-IE 11重叠

Question

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

我有最基本的CSS-Grid，在其中我也使用-ms-前缀，但是由于某些原因，在IE 11中，网格元素将放置在彼此的顶部，而不是预期的行为。

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

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