使背景与最高的子元素一样高

Question

我们的网站上有 CKEditor， 字体大小 和 背景颜色 按钮不能很好地协同工作.

假设我们有这段文字：

Foo Bar Baz

当用户对整个文本应用背景色，然后对"Bar"应用更大的字体时，生成HTML(jsfiddle):

<span style="background-color: yellow">
    Foo
    <span style="font-size: 30px">
        Bar
    </span>
    Baz
</span>

这导致 "Bar" 没有被背景完全覆盖：

我"fixed"它通过将display: inline-block添加到外部span（jsfiddle）：

<span style="background-color: yellow; display: inline-block">
    Foo
    <span style="font-size: 30px">
        Bar
    </span>
    Baz
</span>

不幸的是，此更改在其他情况下破坏了背景颜色的突出显示。

与display: inline-block (jsfiddle):

没有 (jsfiddle):

与display: inline-block (jsfiddle):

没有 (jsfiddle):

所以，我的问题是，如何在不使用 display: inline-block 的情况下修复较大文本的背景？

Answer 1

我认为在这种情况下你需要添加背景色：黄色；向内 .

这不是使线高度相同。但是，这似乎是解决此问题的最合乎逻辑的方法。因为你不想让所有的线都在同一高度。

Make background as tall as the tallest child element