html - 网格布局 Internet Explorer 无法按预期工作

Question

目前我正在所有浏览器中检查我的网站并发现了一个问题。通常此选项卡应如下所示:

但是当我在 IE 中打开页面时它看起来像这样:

我已经检查了 DOM，B 在 A 下。我按照 CSS 文档中的描述进行了操作，但它不起作用。这是此选项卡的 CSS:

ul.tabs {
    display: grid;
    display: -ms-grid;
    grid-template-columns: 1fr 1fr;
    -ms-grid-columns: 1fr 1fr;
}

Answer 1

IE/边缘 10-15 support一个older version CSS 网格规范。

除其他外，缺少自动放置。

https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout有一个差异列表。

你需要

ul.tabs #tab1 {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}
ul.tabs #tab2 {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
}