支持IE10/11的CSS网格语法
问题描述:
如何支持IE10和/或IE11的网格布局?支持IE10/11的CSS网格语法
到目前为止,我只发现-ms-
前缀应该做的伎俩,但我只能让它在边缘浏览器上工作。
我曾尝试查看Microsoft文档和MDN网络,但无法找到任何帮助。
下面你可以找到我的代码中使用:
@supports (display:grid) {
.App-body {
display: grid;
grid-template-columns: 300px auto 300px;
grid-template-areas: "navbar navbar navbar" "leftside content content";
}
.leftside {
grid-area: leftside;
/*align-content: left;*/
}
.rightside {
grid-area: rightside;
/*align-content: right;*/
}
.content {
grid-area: content;
/*align-content: center;*/
}
.navbar {
grid-area: navbar;
}
}
@supports (display:-ms-grid) {
.App-body {
display: -ms-grid;
-ms-grid-columns: 300px auto 300px;
}
.leftside {
-ms-grid-row: 2;
-ms-grid-column: 1;
/*align-content: left;*/
}
.rightside {
-ms-grid-row: 2;
-ms-grid-column: 3;
/*align-content: right;*/
}
.content {
-ms-grid-row: 2;
-ms-grid-column: 2;
}
.navbar {
-ms-grid-row: 1;
-ms-grid-column-span: 3;
}
}
答
@supports
CSS规则Internet Explorer不支持,所以您需要将其删除,使其工作。
也掌管grid-template-columns: 300px auto 300px;
和-ms-grid-columns: 300px auto 300px;
并不等同于IE/EDGE和其他浏览器支持电网:
与
1fr
更换auto
如果你想列时采取所有剩余 空间。与
display: inline-grid
网格容器(display: -ms-grid
用于IE \边缘)如果希望列的宽度由内容定义替换display: grid
。
顺便说一句,你可以删除-ms-grid-column: 1
和-ms-grid-row: 1
为IE /优势,因为它的默认值IE /边缘。 IE/Edge没有网格项目自动布局,默认情况下,IE/Edge会堆叠第一个单元格中的所有网格项目。
谢谢,我发现了这个选择:@media all和(-ms-high-contrast:none),(-ms-high-contrast:active){},通过https://*.com/questions/ 28417056/how-to-target-only-ie-ie-styles-in-a-stylesheet –
@ John-RobertYrjölä你在说什么替代方案? –
@ John-RobertYrjölä是的,这是一个选项,但您可以省略此CSS规则和媒体查询,因为IE/Edge的CSS网格布局不会影响其他浏览器,反之亦然。 –