如何解决IE浏览器下不使用Grid/Flexbox实现图片并排的问题？

嘿，针对你遇到的IE不支持Grid布局的问题，咱们可以用传统的兼容方案来实现图片并排——毕竟Grid和Flexbox在旧IE里确实不生效。下面就针对你的.about__asseenon-images父容器和.about__asseenon-logos子元素，给出两种靠谱的实现方案：

方案一：浮动布局（推荐，兼容性更好） #

浮动是IE从很早版本就支持的属性，而且不会有inline-block那种空格间距的坑，步骤如下：

1. 父容器处理（解决浮动塌陷） #

子元素用浮动后，父容器会塌陷，所以得给父容器加上清浮动的样式，同时设置基础布局：

.about__asseenon-images {
  /* 用overflow:hidden快速清浮动，IE6+都支持 */
  overflow: hidden;
  width: 100%;
  /* 根据你的需求调整内边距 */
  padding: 1rem 0;
}

/* 如果你需要更通用的清浮动（比如父容器需要设置overflow:visible），可以用伪元素方案：
.about__asseenon-images::after {
  content: "";
  display: table;
  clear: both;
}
*/

2. 子元素（图片容器）样式 #

给子元素设置浮动、百分比宽度，同时用box-sizing确保宽度计算正确：

.about__asseenon-logos {
  float: left;
  /* 控制每行显示数量，比如每行4个就设25%，3个就33.333% */
  width: 25%;
  /* 让padding不会撑开宽度，IE8+支持 */
  box-sizing: border-box;
  /* 图片左右间距，避免紧贴 */
  padding: 0 0.5rem;
  /* 垂直方向的间距 */
  margin-bottom: 1rem;
}

/* 图片自适应容器，避免溢出 */
.about__asseenon-logos img {
  width: 100%;
  height: auto;
  display: block; /* 去掉图片默认的inline底部间距 */
}

3. 响应式适配 #

小屏幕上调整每行显示数量，直接用媒体查询修改子元素宽度就行：

@media screen and (max-width: 900px) {
  .about__asseenon-logos {
    width: 50%; /* 平板每行2个 */
  }
}

@media screen and (max-width: 600px) {
  .about__asseenon-logos {
    width: 100%; /* 手机每行1个 */
  }
}

方案二：inline-block布局（可选） #

如果你更倾向于inline-block，需要处理元素间的空格问题，具体实现：

.about__asseenon-images {
  font-size: 0; /* 消除inline-block元素之间的空格 */
  width: 100%;
  padding: 1rem 0;
}

.about__asseenon-logos {
  display: inline-block;
  width: 25%;
  box-sizing: border-box;
  padding: 0 0.5rem;
  margin-bottom: 1rem;
  font-size: 16px; /* 恢复字体大小，避免影响内部内容 */
  vertical-align: top; /* 对齐顶部，防止元素错位 */
}

.about__asseenon-logos img {
  width: 100%;
  height: auto;
  display: block;
}

这个方案在IE8及以上支持，不过需要额外处理空格，浮动方案相对更省心。

兼容性说明 #

• 浮动方案：兼容IE6及以上（如果需要兼容IE7，box-sizing可以用*width的hack，不过现在IE7基本没人用了）
• inline-block方案：兼容IE8及以上

这样替换掉你原来的Grid布局代码，就能在IE里正常显示图片网格啦！

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