Safari浏览器中模态框滚动指示器文本溢出边框问题求助

我之前做类似滚动指示器的时候，也碰到过Safari的这个兼容坑，结合你给出的代码，咱们来搞定它：

问题拆解 #

你用到的滚动指示器代码是这样的：

<div class='d-flex justify-center mb-0 pb-0 overlay' style="width: 100%;"> 
  <span>Scroll down</span> 
  <v-icon>keyboard_arrow_down</v-icon> 
</div>

Safari在弹性布局（d-flex是Bootstrap的弹性布局类）下，对文本换行、容器约束的处理和其他浏览器不一样，大概率是文本没正确触发换行，或者容器的内外边距计算差异导致文本撑破边框。

针对性解决方案 #

按顺序试试这几个调整：

• 强制文本在容器内换行：给<span>加CSS，确保文本不会超出容器宽度，同时给图标预留空间：

  .overlay span {
    white-space: normal;
    word-wrap: break-word;
    max-width: calc(100% - 28px); /* 预留图标的宽度，避免和图标挤在一起溢出 */
  }
  

• 优化弹性布局行为：Safari对justify-content: center的处理偶尔会有偏差，给容器加上换行和溢出控制：

  .overlay {
    flex-wrap: wrap;
    overflow-x: hidden;
  }
  

• 重置Safari默认样式干扰：Safari会给部分元素加默认的内边距或行高，可能导致布局偏移，重置一下：

  .overlay, .overlay span {
    margin: 0;
    padding: 0;
    line-height: 1.2; /* 调整行高，避免文本因行高过大超出容器 */
  }
  

如果还是没解决，建议检查overlay类有没有其他冲突的CSS属性，比如position: absolute、min-width这类设置，在Safari里也容易引发溢出问题。

内容的提问来源于stack exchange，提问作者Kyle Corbin Hurst