IE11中的CSS网格自动行 [英] CSS grid auto rows in IE11

问题描述

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

Just the simplest grid was rendered into one overlaped row in IE11 when I tried to build 2 columns grid.

布局：

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;
}

在其他运行正常的浏览器中。怎么了？
谢谢

In other browsers working Ok. What's wrong? Thanks

推荐答案

我将其添加为答案（即使Michael_B的重复内容解决了核心问题：即使在带前缀的情况下，CSS Grid Layout在IE11中也不起作用）-尽管它是一种无需手动执行即可输出多个规则的实用程序。

I'm adding this as an answer (even though Michael_B's duplicate addresses the core problem: CSS Grid Layout not working in IE11 even with prefixes ) - even though it's a utility to output multiple rules without having to manually do it.

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

Here's the output using SASS for the 2-column:

@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或使用本地预处理器）。

You can use: https://www.sassmeister.com/ to generate the CSS (so you don't have to install gulp/grunt or use a local preprocessor).

这篇关于IE11中的CSS网格自动行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！