Safari 10中Bootstrap 4卡片Flexbox图片重叠及父元素尺寸问题

我之前也踩过老版本浏览器flex布局的兼容坑，咱们一步步拆解解决这个问题：

问题核心矛盾 #

你遇到的是典型的跨浏览器flex规范支持差异：

• Safari 10对现代flexbox的实现存在缺陷，需要更明确的属性声明才能正确计算容器空间分配
• IE11本身对flex:1简写的解析有bug，会错误压缩子元素空间，导致内容拥挤重叠

分步解决方案 #

1. 先搭建基础flex容器样式

确保Card父容器有正确的flex基础配置，避免浏览器默认布局冲突：

.card {
  display: flex;
  flex-direction: column;
  height: 100%; /* 让容器继承父级高度，保证垂直方向有足够空间分配 */
  overflow: hidden; /* 防止内容溢出容器边界 */
}

2. 针对Safari 10的专属修复

Safari 10需要显式指定flex的完整属性值（而非简写flex:1），我们可以用浏览器专属媒体查询定位它：

/* 仅针对Safari 10的样式hack */
@media not all and (min-resolution:.001dpcm) { 
  @media {
    .card-content-wrapper { /* 你之前添加flex:1的目标父元素 */
      -webkit-flex: 1 1 auto;
      flex: 1 1 auto;
      overflow-y: auto; /* 内容过多时允许滚动，避免重叠 */
    }
  }
}

3. 修复IE11的内容拥挤问题

IE11不识别上面的Safari媒体查询，我们用IE专属CSS hack给它单独设置样式，规避flex:1带来的压缩问题：

/* 仅针对IE11的样式hack */
_:-ms-fullscreen, :root .card-content-wrapper {
  flex: none; /* 取消flex扩展，让内容自然占据空间 */
  min-height: fit-content; /* 保证内容有足够展示高度 */
}

4. 图片的适配保障

别忘了给Card内的图片加基础适配样式，防止图片本身溢出导致重叠：

.card-image img {
  max-width: 100%;
  height: auto;
  display: block; /* 消除图片下方的默认空白间隙 */
}

方案为什么有效？ #

我们通过浏览器专属的样式规则，让Safari 10和IE11各自加载适配自身的flex配置，不会互相干扰；同时给内容容器添加滚动属性，即使内容过多也会友好展示，避免强制重叠。

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