为什么即使使用 Autoprefixer，我的 CSS 网格布局也无法在 IE11 中工作？

CSS 网格布局即使有前缀也无法在 IE11 中工作

尽管使用自动前缀器向相关 CSS 属性添加前缀，CSS 网格布局在 IE11 中似乎出现故障。出现此问题的原因是浏览器的网格规范过时。

过时的网格规范

IE11 实现了旧版本的网格规范，缺少稍后介绍的一些关键属性版本。具体来说，IE11 不支持以下属性：

• 用于定义网格轨道的repeat()函数
• 用于项目跨越的span关键字
• 用于定义网格轨道的grid-gap属性间距

解决方案

要解决此问题，应更新代码以使用旧网格规范的正确语法和属性。需要进行以下更改：

1.将repeat() 替换为显式轨道声明

不要使用repeat() 函数，而是使用逗号分隔值显式声明行和列轨道：

.grid {
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
  grid-template-columns: repeat(4, 1fr);
  -ms-grid-rows: 270px 270px 270px 270px;
  grid-template-rows: repeat(4, 270px);
}

2.使用 Spanning 属性

将 span 替换为其简写形式 grid-row-span 和 grid-colum-span：

.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;
}

3.删除 IE11 中的 Grid-Gap

IE11 不支持 grid-gap 属性。考虑使用边距或填充来代替：

.grid .grid-item {
  margin: 30px;
}

附加说明

IE11 也不支持自动放置网格项。为了确保正确放置，请使用 -ms-grid-row 和 -ms-grid-column 属性显式指定每个项目的网格行和列位置。

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