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

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

假设我们有这样的文本：

Foo Bar Baz

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

不幸的是，在其他情况下，此更改破坏了背景色的高亮显示

使用

显示：内联块

（）：

没有（）：

使用

显示：内联块

（）：

没有（）：

---

因此，我的问题是，如何在不使用

display:inline block

的情况下修复较大文本的背景？

我认为在这种情况下需要添加 背景颜色：黄色； 到里面去

这条线的高度不一样。 但是，这似乎是解决这个问题最合乎逻辑的方法。

---

因为你不想把所有的线都排在同一个高度。

谢谢！我添加了这个CSS:

.outer span*{background color:inherit}

，现在它就像一个符咒。

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

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