IE11中Flexbox布局图片显示原高而非auto的解决方法求助

嘿，这个IE11的Flexbox坑我简直太熟悉了！毕竟IE11的flex布局总是有各种让人头疼的小毛病，咱们一步步来搞定它：

1. 先给图片加专属的IE兼容样式 #

IE11在处理flex容器内的图片时，会忽略height: auto的比例规则，反而强制拉伸图片匹配容器高度。你可以给图片添加以下CSS：

.your-image-selector {
  max-width: 100%;
  height: auto;
  /* 防止IE11强制压缩/拉伸图片 */
  -ms-flex-negative: 0;
  flex-shrink: 0;
  /* 让图片在flex项内垂直居中，而非被容器拉伸 */
  align-self: center;
}

这里的your-image-selector替换成你实际的图片类名或选择器就行。

2. 给图片套一个容器（终极兜底方案） #

如果上面的方法还不生效，那就给图片外层套一个<div class="image-wrapper">容器，把flex居中的逻辑转移到这个容器上：

<div class="image-wrapper">
  <img src="your-image-url" alt="描述文本" class="your-image-selector">
</div>

然后给容器加这些样式：

.image-wrapper {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%; /* 匹配流式容器的宽度 */
}

图片的CSS保持max-width: 100%; height: auto;就好，这样IE11会把容器当作flex项，图片在容器内被居中，完全不会被拉伸。

3. 检查等高列WordPress插件的影响 #

你提到的等高列插件很可能是“帮倒忙”的那个——这类插件通常会给容器添加display: flex和flex: 1之类的属性，强制父容器拉伸，进而导致图片被带偏。

你可以做这两步排查：

• 查看插件给图片父容器加的样式，如果有flex: 1或者align-items: stretch，可以给父容器额外加min-height: auto !important;来覆盖；
• 或者在插件的设置里，看看有没有“排除特定元素”的选项，把图片容器排除在等高规则之外。

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