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

Question

我们的网站上有CKEditor，字体大小和背景颜色按钮不能很好地结合使用。

假设我们有这样的文字：

Foo Bar Baz

当用户将背景颜色应用于整个文本，然后将更大的字体大小应用于“Bar”时，将生成此HTML（jsfiddle）：

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

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

我通过将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

我认为在这种情况下你需要添加 背景颜色：黄色; 到了内心。

这不是使线条处于同一高度。 但是，它似乎是解决这个问题最合理的方式。 因为你不想让所有的线都处于相同的高度。