即使使用-ms前缀，CSS Grid也无法在IE11或Edge上运行 [英] CSS Grid not workiing on IE11 or Edge even with -ms prefix

问题描述

我一直在遵循指南

I've been following the guide here on getting grids working on IE 11. My problem is that even following those rules, the columns and rows just overlap each other rather than taking their grid positions.

这是一个会导致问题的简单代码示例:

Here's a simple code example that would cause the problem:

HTML

<div class="grid">
  <div>Top Left</div>
  <div>Top Right</div>
  <div>Bottom Left</div>
  <div>Bottom Right</div>
</div>

CSS

.grid {
  display: -ms-grid;
  -ms-grid-columns: 200px 200px;
  -ms-grid-rows: 200px 200px;
}

这是指向它的一个codepen链接:

And here's a codepen link to it:

https://codepen.io/anon/pen/pdNWMj

我把这个代码弄错了吗，还是我应该使用ms以外的网格实现?

Am I getting this code wrong, or should I be using something other than the ms implementation of grid?

推荐答案

必须使用-ms-grid-column和-ms-grid-row为每个子项指定其在网格中的位置.

You must use -ms-grid-column and -ms-grid-row to specify for each child where it is in the grid.

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 200px 200px;
  -ms-grid-rows: 200px 200px;
  grid-template-columns: 200px 200px;
  grid-template-rows: 200px 200px;
}

.top-left {
  -ms-grid-column: 1;
  -ms-grid-row: 1;
}

.top-right {
  -ms-grid-column: 2;
  -ms-grid-row: 1;
}

.bottom-left {
  -ms-grid-column: 1;
  -ms-grid-row: 2;
}

.bottom-right {
  -ms-grid-column: 2;
  -ms-grid-row: 2;
}

<div class="grid">
  <div class="top-left">Top Left</div>
  <div class="top-right">Top Right</div>
  <div class="bottom-left">Bottom Left</div>
  <div class="bottom-right">Bottom Right</div>
</div>

https://codepen.io/anon/pen/ZaBaVa

不如其他浏览器方便... 希望这会有所帮助;)

Not as convenient as the other browsers... Hoping this helps though ;)

这篇关于即使使用-ms前缀，CSS Grid也无法在IE11或Edge上运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！