文本在 safari 上突破边界

Question

我正在尝试制作一个指示器以在模式上滚动，但文本在 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 上的样子：

Here's the codepen

Answer 1

Safari 似乎没有考虑行高，但我不知道为什么（尽管我在 Google 时确实看到很多关于 Safari 行高错误的投诉）。

无论如何设置：

min-height: 1.5em

关于这个元素：

<div class="d-flex justify-center mb-0 pb-0 overlay" style="width: 100%;">

（因为里面文字上的 line-height 是 1.5em）应该使它看起来正确。

text breaks through border on safari