如何让Grid Layout在Internet Explorer中正常生效？

首先得明确两个核心限制：

• IE9完全不支持CSS Grid，必须用浮动、inline-block这类传统布局做降级方案
• IE11仅支持旧版Grid规范，repeat(auto-fit, minmax())、grid-gap这些新版属性都不支持，得单独写兼容样式

具体解决方案 #

我们通过浏览器专属hack和特性降级，为IE提供适配样式的同时，保留现代浏览器的Grid布局效果：

完整兼容版CSS代码

/* 现代浏览器Grid基础样式 */
.grid {
  display: grid;
  justify-content: start;
  margin-top: -20px;
}

/* 不同断点的Grid配置（仅现代浏览器生效） */
@media (min-width: 800px) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    grid-row-gap: 70px;
    grid-column-gap: 40px;
  }
}
@media (min-width: 600px) and (max-width: 799px) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-row-gap: 40px;
    grid-column-gap: 30px;
    margin-top: -15px;
  }
}
@media (max-width: 599px) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    grid-row-gap: 40px;
    grid-column-gap: 20px;
    margin-top: 18px;
  }
}

/* IE11兼容：用Flexbox模拟Grid效果 */
_:-ms-fullscreen, :root .grid {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

@media (min-width: 800px) {
  _:-ms-fullscreen, :root .grid {
    margin: -70px -20px 0; /* 负margin抵消子元素margin，模拟grid-gap */
  }
  _:-ms-fullscreen, :root .grid > article {
    -ms-flex: 0 0 calc(25% - 40px);
    flex: 0 0 calc(25% - 40px); /* 4列布局，减去gap宽度 */
    margin: 70px 20px 0; /* 模拟行/列间距 */
  }
}
@media (min-width: 600px) and (max-width: 799px) {
  _:-ms-fullscreen, :root .grid {
    margin: -40px -15px 0;
  }
  _:-ms-fullscreen, :root .grid > article {
    -ms-flex: 0 0 calc(50% - 30px);
    flex: 0 0 calc(50% - 30px); /* 2列布局 */
    margin: 40px 15px 0;
  }
}
@media (max-width: 599px) {
  _:-ms-fullscreen, :root .grid {
    margin: 18px -10px 0;
  }
  _:-ms-fullscreen, :root .grid > article {
    -ms-flex: 0 0 calc(50% - 20px);
    flex: 0 0 calc(50% - 20px); /* 2列布局 */
    margin: 0 10px 40px;
  }
}

/* IE9兼容：用inline-block实现多列 */
@media screen and (min-width: 0\0) {
  .grid {
    display: block;
    font-size: 0; /* 消除inline-block元素间的默认间距 */
    margin-top: 18px;
  }
  .grid > article {
    display: inline-block;
    font-size: 16px; /* 恢复正常字体大小 */
    vertical-align: top;
  }
  @media (min-width: 800px) {
    .grid > article {
      width: calc(25% - 40px);
      margin: 0 20px 70px;
    }
  }
  @media (min-width: 600px) and (max-width: 799px) {
    .grid > article {
      width: calc(50% - 30px);
      margin: 0 15px 40px;
    }
  }
  @media (max-width: 599px) {
    .grid > article {
      width: calc(50% - 20px);
      margin: 0 10px 40px;
    }
  }
}

/* 子元素基础样式保持不变 */
.grid .photo {
  width: 100%;
  background-size: contain;
  background-position: center;
}
.grid .photo:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.grid a {
  display: block;
  text-decoration: none;
  color: inherit;
}

关键细节说明

• IE11适配：用_:-ms-fullscreen, :root这个IE11专属hack，借助Flexbox的flex-wrap: wrap模拟Grid的自动换行效果，通过容器负margin+子元素margin实现grid-gap的间距效果
• IE9适配：用@media screen and (min-width: 0\0)这个IE9专属媒体查询，用inline-block实现多列布局，通过font-size:0消除元素间的默认空白间距
• 现代浏览器会自动忽略IE专属的hack样式，正常使用原生Grid布局

这样修改后，你的布局在IE9、IE11以及所有现代浏览器中都能正常显示了。

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