-ms-grid-columns堆积列

Question

这是我的网格当前正在使用的CSS：

.projectStatusCountGrid {
    display: grid;
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: repeat(10, 1fr);
}

这是我的网格在IE11中的实际外观：

但是，当我检查它时，它表明网格列都在那里...它们只是全部堆叠在同一位置。我需要添加什么来解决此问题，而该问题不会影响具有现代功能的浏览器中的任何内容？

Answer 1

除非您告知，否则

IE不知道将列放在何处。这就是为什么它们彼此堆叠在一起的原因。对于div容器中的每个display: grid，指定一列：

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

...

.projectStatusCountGrid div:nth-of-type(12) {
  -ms-grid-column: 12;
}