IE11使用较旧版本的Grid规范。
您使用的属性在较早的网格规范中不存在。使用前缀没有区别。
我立即看到了三个问题。
该repeat()
功能在较早的规范中不存在,因此IE11不支持该功能。
代替:
.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: repeat( 4, 1fr );
grid-template-columns: repeat( 4, 1fr );
-ms-grid-rows: repeat( 4, 270px );
grid-template-rows: repeat( 4, 270px );
grid-gap: 30px;
}
采用:
.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr 1fr 1fr; /* adjusted */
grid-template-columns: repeat( 4, 1fr );
-ms-grid-rows: 270px 270px 270px 270px; /* adjusted */
grid-template-rows: repeat( 4, 270px );
grid-gap: 30px;
}
span
关键字在较早的规范中不存在,因此IE11不支持该关键字。您必须为这些浏览器使用等效的属性。
代替:
.grid .grid-item.height-2x {
-ms-grid-row: span 2;
grid-row: span 2;
}
.grid .grid-item.width-2x {
-ms-grid-column: span 2;
grid-column: span 2;
}
采用:
.grid .grid-item.height-2x {
-ms-grid-row-span: 2; /* adjusted */
grid-row: span 2;
}
.grid .grid-item.width-2x {
-ms-grid-column-span: 2; /* adjusted */
grid-column: span 2;
}
该grid-gap
属性及其长期形式grid-column-gap
和grid-row- gap
在较早的规范中不存在,因此IE11不支持它们。您将必须找到另一种分隔框的方法。我还没有阅读完整的旧规范,因此可能有一种方法。否则,请尝试边距。
但是该功能从未在IE11中实现。(在当前浏览器中,网格项目的自动放置现在是标准的)。
因此,除非您专门定义网格项的位置,否则它们将堆叠在单元格1,1中。
使用-ms-grid-row
和-ms-grid-column
属性。