如何在Internet Explorer 11中实现兼容的CSS repeat函数及网格布局

嘿，我完全懂你遇到的糟心问题——IE11对CSS Grid的支持是基于旧版W3C草案，它根本不认识现代Grid里的repeat()函数，而且连网格的自动放置（autoplacement）功能都不支持，这就是为什么你的网格在Chrome/Firefox里正常，到IE11就只显示1个项目的核心原因。下面给你几个实用的解决办法：

一、手动编写IE11兼容的网格代码 #

如果你的网格结构比较简单，可以直接把repeat()展开成手动的轨道列表，同时用空轨道模拟grid-gap（因为IE11也不支持grid-gap属性）。

举个例子，假设你原本的代码是：

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

转换成IE11兼容的写法要做两件事：

1. 把repeat(3, 1fr)拆成1fr 10px 1fr 10px 1fr——中间的10px就是用来模拟列间距的空轨道
2. 给每个子元素手动指定网格位置（因为IE11不会自动排列子元素，默认都会挤在第一个单元格里）

完整兼容代码如下：

body { margin: 30px; }

.wrapper {
  /* 先加IE11的前缀语法 */
  display: -ms-grid;
  /* 现代Grid语法 */
  display: grid;
  /* IE11的列：3个内容轨道+2个间距轨道 */
  -ms-grid-columns: 1fr 10px 1fr 10px 1fr;
  grid-template-columns: repeat(3, 1fr);
  /* IE11的行：假设是3行，每行高度auto+2个间距轨道 */
  -ms-grid-rows: auto 10px auto 10px auto;
  grid-auto-rows: auto;
  grid-gap: 10px;
}

/* 手动定位每个子元素，避开间距轨道 */
.wrapper > .item:nth-child(1) {
  -ms-grid-column: 1;
  -ms-grid-row: 1;
}
.wrapper > .item:nth-child(2) {
  -ms-grid-column: 3;
  -ms-grid-row: 1;
}
.wrapper > .item:nth-child(3) {
  -ms-grid-column: 5;
  -ms-grid-row: 1;
}
.wrapper > .item:nth-child(4) {
  -ms-grid-column: 1;
  -ms-grid-row: 3;
}
.wrapper > .item:nth-child(5) {
  -ms-grid-column: 3;
  -ms-grid-row: 3;
}
/* 更多子元素以此类推，行的轨道编号是奇数（1、3、5...），列同理 */

二、用PostCSS插件自动转换兼容代码 #

如果你的网格结构复杂、子元素多，手动写定位代码太麻烦，推荐用PostCSS工具链自动处理IE11的兼容问题。

推荐插件：postcss-grid-kiss #

这个插件可以把现代CSS Grid语法一键转换成IE11完全兼容的代码，包括处理repeat()、grid-gap和自动放置的问题。

使用步骤：

1. 安装依赖：

npm install postcss postcss-grid-kiss --save-dev

2. 在项目根目录创建postcss.config.js：

module.exports = {
  plugins: [
    require('postcss-grid-kiss')()
  ]
}

3. 构建项目时，PostCSS会自动把你的现代Grid代码转换成IE11能识别的前缀语法，不用手动写任何兼容代码。

额外注意事项 #

IE11的Grid支持还有不少限制，比如：

• 不支持grid-auto-flow属性，无法控制自动排列方向
• fr单位和固定宽度混合使用时可能出现布局异常
• 不支持grid-template-areas语法

如果你的布局用到了这些特性，可能需要针对IE11做额外的适配。

内容的提问来源于stack exchange，提问作者Sharath