为什么即使有前缀，我的 CSS 网格布局也无法在 IE11 中呈现？

CSS 网格布局在 IE11 中无法呈现，尽管有前缀

理解问题

在 CSS 网格布局中，用法-ms 前缀旨在确保与 Microsoft Edge 和 IE11 的兼容性。然而，当这无法在 IE11 中渲染网格时，我们深入研究其根本原因。

IE11 的有限网格规范实现

问题的症结在于 IE11 的遵守旧版本的网格规范。因此，即使使用 -ms 前缀，所提供的 HTML 和 SCSS 代码中使用的多个 CSS 属性也无法被 IE11 识别。

具体挑战

1. repeat(): IE11 缺乏对 grid-template-columns 中的 Repeat() 函数的支持，网格模板行。这需要使用显式的列和行定义。
2. span: 旧规范中不存在 grid-column-span 和 grid-row-span 的 span 关键字。 IE11 需要使用等效的属性 grid-column-span 和 grid-row-span。
3. grid-gap: IE11 不支持 grid-gap 属性及其长写形式。网格项之间的间距需要替代方法，例如边距。
4. 网格项自动放置： IE11 不支持自动放置网格项。为了确保正确放置，请为每个网格项显式定义 -ms-grid-row 和 -ms-grid-column 属性。

IE11 兼容性的修订代码：

提供的代码必须更新如下才能在 IE11 中工作：

    .grid {
      display: -ms-grid;
      -ms-grid-columns: 1fr 1fr 1fr 1fr;
      -ms-grid-rows: 270px 270px 270px 270px;
      grid-gap: 30px;
    }

    .grid .grid-item {
      -ms-grid-column: span 2;
      -ms-grid-row: span 2;
    }

以上是为什么即使有前缀，我的 CSS 网格布局也无法在 IE11 中呈现？的详细内容。更多信息请关注PHP中文网其他相关文章！