Safari中最后一个子元素的margin-right不生效问题排查与解决

问题原因 #

Safari在处理带有overflow-x: auto/scroll的横向滚动容器时，存在子元素margin计算的兼容Bug：容器不会将最后一个子元素的margin-right纳入滚动宽度的计算范围，导致这部分边距在视觉上完全失效；而Chrome等浏览器会正确识别该margin并扩展容器的滚动区域，因此表现正常。

修复方案 #

方案1：用容器的padding替代子元素首尾margin（推荐） #

这是兼容性最好的方案，所有浏览器都能正确识别容器的内边距，滚动范围会自动包含这部分空间。只需给滚动容器添加左右padding，同时移除卡片的首尾margin设置：

.scroll-container {
  overflow-x: auto;
  padding-left: 16px;
  padding-right: 16px;
}

.card {
  height: 300px;
  width: 300px;
  border: 1px solid black;
}

方案2：给容器添加伪元素占位 #

通过在容器末尾添加一个空的伪元素，设置其宽度等于需要的右侧margin值，让Safari正确计算滚动宽度：

.scroll-container {
  overflow-x: auto;
}

.scroll-container::after {
  content: '';
  display: block;
  width: 16px;
  flex-shrink: 0; /* 若容器为flex布局，需添加此属性防止伪元素被压缩 */
}

.card {
  height: 300px;
  width: 300px;
  border: 1px solid black;

  &:first-of-type {
    margin-left: 16px;
  }
}

方案3：使用scroll-padding-right（仅现代Safari支持） #

如果无需兼容旧版Safari，可以利用CSS滚动内边距属性，调整滚动区域的右侧预留空间，视觉效果与margin-right一致：

.scroll-container {
  overflow-x: auto;
  scroll-padding-right: 16px;
}

.card {
  height: 300px;
  width: 300px;
  border: 1px solid black;

  &:first-of-type {
    margin-left: 16px;
  }
}

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