Question

当我尝试构建2列网格时，在IE11中，最简单的网格被渲染为一个重叠的行。

布局：

dl
  dt
  dd
  dt
  dd
  .............. 
  any number of rows
  ..............
/dt

CSS：

dl {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 2fr;
    grid-template-columns: 1fr 2fr;

    -ms-grid-rows: auto;
    grid-template-rows: auto;

}

dt {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}
dd {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
}

在其他浏览器中工作正常。怎么了？谢谢

Answer 1

我将其添加为答案（即使Michael_B的重复内容解决了核心问题：CSS Grid Layout not working in IE11 even with prefixes）-即使它是无需手动执行即可输出多个规则的实用程序。

以下是两列使用SASS的输出：

@for $i from 1 through 50 {
  dt:nth-of-type(#{$i}) {
      -ms-grid-column: 1;
      -ms-grid-row: 1 * $i;
  }

  dd:nth-of-type(#{$i}) {
    -ms-grid-column: 2;
    -ms-grid-row: 1 * $i;
  }
}

这将输出：

dt:nth-of-type(1) {
  -ms-grid-column: 1;
  -ms-grid-row: 1;
}

dd:nth-of-type(1) {
  -ms-grid-column: 2;
  -ms-grid-row: 1;
}

dt:nth-of-type(2) {
  -ms-grid-column: 1;
  -ms-grid-row: 2;
}

dd:nth-of-type(2) {
  -ms-grid-column: 2;
  -ms-grid-row: 2;
}

dt:nth-of-type(3) {
  -ms-grid-column: 1;
  -ms-grid-row: 3;
}

dd:nth-of-type(3) {
  -ms-grid-column: 2;
  -ms-grid-row: 3;
}

dt:nth-of-type(4) {
  -ms-grid-column: 1;
  -ms-grid-row: 4;
}

dd:nth-of-type(4) {
  -ms-grid-column: 2;
  -ms-grid-row: 4;
}

dt:nth-of-type(5) {
  -ms-grid-column: 1;
  -ms-grid-row: 5;
}

dd:nth-of-type(5) {
  -ms-grid-column: 2;
  -ms-grid-row: 5;
}

dt:nth-of-type(6) {
  -ms-grid-column: 1;
  -ms-grid-row: 6;
}

dd:nth-of-type(6) {
  -ms-grid-column: 2;
  -ms-grid-row: 6;
}

dt:nth-of-type(7) {
  -ms-grid-column: 1;
  -ms-grid-row: 7;
}

dd:nth-of-type(7) {
  -ms-grid-column: 2;
  -ms-grid-row: 7;
}

dt:nth-of-type(8) {
  -ms-grid-column: 1;
  -ms-grid-row: 8;
}

dd:nth-of-type(8) {
  -ms-grid-column: 2;
  -ms-grid-row: 8;
}

dt:nth-of-type(9) {
  -ms-grid-column: 1;
  -ms-grid-row: 9;
}

dd:nth-of-type(9) {
  -ms-grid-column: 2;
  -ms-grid-row: 9;
}

dt:nth-of-type(10) {
  -ms-grid-column: 1;
  -ms-grid-row: 10;
}

dd:nth-of-type(10) {
  -ms-grid-column: 2;
  -ms-grid-row: 10;
}

dt:nth-of-type(11) {
  -ms-grid-column: 1;
  -ms-grid-row: 11;
}

dd:nth-of-type(11) {
  -ms-grid-column: 2;
  -ms-grid-row: 11;
}

dt:nth-of-type(12) {
  -ms-grid-column: 1;
  -ms-grid-row: 12;
}

dd:nth-of-type(12) {
  -ms-grid-column: 2;
  -ms-grid-row: 12;
}

dt:nth-of-type(13) {
  -ms-grid-column: 1;
  -ms-grid-row: 13;
}

dd:nth-of-type(13) {
  -ms-grid-column: 2;
  -ms-grid-row: 13;
}

dt:nth-of-type(14) {
  -ms-grid-column: 1;
  -ms-grid-row: 14;
}

dd:nth-of-type(14) {
  -ms-grid-column: 2;
  -ms-grid-row: 14;
}

dt:nth-of-type(15) {
  -ms-grid-column: 1;
  -ms-grid-row: 15;
}

dd:nth-of-type(15) {
  -ms-grid-column: 2;
  -ms-grid-row: 15;
}

dt:nth-of-type(16) {
  -ms-grid-column: 1;
  -ms-grid-row: 16;
}

dd:nth-of-type(16) {
  -ms-grid-column: 2;
  -ms-grid-row: 16;
}

dt:nth-of-type(17) {
  -ms-grid-column: 1;
  -ms-grid-row: 17;
}

dd:nth-of-type(17) {
  -ms-grid-column: 2;
  -ms-grid-row: 17;
}

dt:nth-of-type(18) {
  -ms-grid-column: 1;
  -ms-grid-row: 18;
}

dd:nth-of-type(18) {
  -ms-grid-column: 2;
  -ms-grid-row: 18;
}

dt:nth-of-type(19) {
  -ms-grid-column: 1;
  -ms-grid-row: 19;
}

dd:nth-of-type(19) {
  -ms-grid-column: 2;
  -ms-grid-row: 19;
}

dt:nth-of-type(20) {
  -ms-grid-column: 1;
  -ms-grid-row: 20;
}

dd:nth-of-type(20) {
  -ms-grid-column: 2;
  -ms-grid-row: 20;
}

dt:nth-of-type(21) {
  -ms-grid-column: 1;
  -ms-grid-row: 21;
}

dd:nth-of-type(21) {
  -ms-grid-column: 2;
  -ms-grid-row: 21;
}

dt:nth-of-type(22) {
  -ms-grid-column: 1;
  -ms-grid-row: 22;
}

dd:nth-of-type(22) {
  -ms-grid-column: 2;
  -ms-grid-row: 22;
}

dt:nth-of-type(23) {
  -ms-grid-column: 1;
  -ms-grid-row: 23;
}

dd:nth-of-type(23) {
  -ms-grid-column: 2;
  -ms-grid-row: 23;
}

dt:nth-of-type(24) {
  -ms-grid-column: 1;
  -ms-grid-row: 24;
}

dd:nth-of-type(24) {
  -ms-grid-column: 2;
  -ms-grid-row: 24;
}

dt:nth-of-type(25) {
  -ms-grid-column: 1;
  -ms-grid-row: 25;
}

dd:nth-of-type(25) {
  -ms-grid-column: 2;
  -ms-grid-row: 25;
}

dt:nth-of-type(26) {
  -ms-grid-column: 1;
  -ms-grid-row: 26;
}

dd:nth-of-type(26) {
  -ms-grid-column: 2;
  -ms-grid-row: 26;
}

dt:nth-of-type(27) {
  -ms-grid-column: 1;
  -ms-grid-row: 27;
}

dd:nth-of-type(27) {
  -ms-grid-column: 2;
  -ms-grid-row: 27;
}

dt:nth-of-type(28) {
  -ms-grid-column: 1;
  -ms-grid-row: 28;
}

dd:nth-of-type(28) {
  -ms-grid-column: 2;
  -ms-grid-row: 28;
}

dt:nth-of-type(29) {
  -ms-grid-column: 1;
  -ms-grid-row: 29;
}

dd:nth-of-type(29) {
  -ms-grid-column: 2;
  -ms-grid-row: 29;
}

dt:nth-of-type(30) {
  -ms-grid-column: 1;
  -ms-grid-row: 30;
}

dd:nth-of-type(30) {
  -ms-grid-column: 2;
  -ms-grid-row: 30;
}

dt:nth-of-type(31) {
  -ms-grid-column: 1;
  -ms-grid-row: 31;
}

dd:nth-of-type(31) {
  -ms-grid-column: 2;
  -ms-grid-row: 31;
}

dt:nth-of-type(32) {
  -ms-grid-column: 1;
  -ms-grid-row: 32;
}

dd:nth-of-type(32) {
  -ms-grid-column: 2;
  -ms-grid-row: 32;
}

dt:nth-of-type(33) {
  -ms-grid-column: 1;
  -ms-grid-row: 33;
}

dd:nth-of-type(33) {
  -ms-grid-column: 2;
  -ms-grid-row: 33;
}

dt:nth-of-type(34) {
  -ms-grid-column: 1;
  -ms-grid-row: 34;
}

dd:nth-of-type(34) {
  -ms-grid-column: 2;
  -ms-grid-row: 34;
}

dt:nth-of-type(35) {
  -ms-grid-column: 1;
  -ms-grid-row: 35;
}

dd:nth-of-type(35) {
  -ms-grid-column: 2;
  -ms-grid-row: 35;
}

dt:nth-of-type(36) {
  -ms-grid-column: 1;
  -ms-grid-row: 36;
}

dd:nth-of-type(36) {
  -ms-grid-column: 2;
  -ms-grid-row: 36;
}

dt:nth-of-type(37) {
  -ms-grid-column: 1;
  -ms-grid-row: 37;
}

dd:nth-of-type(37) {
  -ms-grid-column: 2;
  -ms-grid-row: 37;
}

dt:nth-of-type(38) {
  -ms-grid-column: 1;
  -ms-grid-row: 38;
}

dd:nth-of-type(38) {
  -ms-grid-column: 2;
  -ms-grid-row: 38;
}

dt:nth-of-type(39) {
  -ms-grid-column: 1;
  -ms-grid-row: 39;
}

dd:nth-of-type(39) {
  -ms-grid-column: 2;
  -ms-grid-row: 39;
}

dt:nth-of-type(40) {
  -ms-grid-column: 1;
  -ms-grid-row: 40;
}

dd:nth-of-type(40) {
  -ms-grid-column: 2;
  -ms-grid-row: 40;
}

dt:nth-of-type(41) {
  -ms-grid-column: 1;
  -ms-grid-row: 41;
}

dd:nth-of-type(41) {
  -ms-grid-column: 2;
  -ms-grid-row: 41;
}

dt:nth-of-type(42) {
  -ms-grid-column: 1;
  -ms-grid-row: 42;
}

dd:nth-of-type(42) {
  -ms-grid-column: 2;
  -ms-grid-row: 42;
}

dt:nth-of-type(43) {
  -ms-grid-column: 1;
  -ms-grid-row: 43;
}

dd:nth-of-type(43) {
  -ms-grid-column: 2;
  -ms-grid-row: 43;
}

dt:nth-of-type(44) {
  -ms-grid-column: 1;
  -ms-grid-row: 44;
}

dd:nth-of-type(44) {
  -ms-grid-column: 2;
  -ms-grid-row: 44;
}

dt:nth-of-type(45) {
  -ms-grid-column: 1;
  -ms-grid-row: 45;
}

dd:nth-of-type(45) {
  -ms-grid-column: 2;
  -ms-grid-row: 45;
}

dt:nth-of-type(46) {
  -ms-grid-column: 1;
  -ms-grid-row: 46;
}

dd:nth-of-type(46) {
  -ms-grid-column: 2;
  -ms-grid-row: 46;
}

dt:nth-of-type(47) {
  -ms-grid-column: 1;
  -ms-grid-row: 47;
}

dd:nth-of-type(47) {
  -ms-grid-column: 2;
  -ms-grid-row: 47;
}

dt:nth-of-type(48) {
  -ms-grid-column: 1;
  -ms-grid-row: 48;
}

dd:nth-of-type(48) {
  -ms-grid-column: 2;
  -ms-grid-row: 48;
}

dt:nth-of-type(49) {
  -ms-grid-column: 1;
  -ms-grid-row: 49;
}

dd:nth-of-type(49) {
  -ms-grid-column: 2;
  -ms-grid-row: 49;
}

dt:nth-of-type(50) {
  -ms-grid-column: 1;
  -ms-grid-row: 50;
}

dd:nth-of-type(50) {
  -ms-grid-column: 2;
  -ms-grid-row: 50;
}

您可以使用：https://www.sassmeister.com/生成CSS（因此您不必安装gulp / grunt或使用本地预处理器）。

IE11中的CSS网格自动行

1 个答案: