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

来源

2017-08-03 John-Robert Yrjölä

@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会堆叠第一个单元格中的所有网格项目。

来源

2017-08-03 12:28:16

谢谢，我发现了这个选择：@media all和（-ms-high-contrast：none），（-ms-high-contrast：active）{}，通过https://stackoverflow.com/questions/ 28417056/how-to-target-only-ie-ie-styles-in-a-stylesheet –

@ John-RobertYrjölä你在说什么替代方案？ –

@ John-RobertYrjölä是的，这是一个选项，但您可以省略此CSS规则和媒体查询，因为IE/Edge的CSS网格布局不会影响其他浏览器，反之亦然。 –

支持IE10/11的CSS网格语法

回答

相关问题