Chrome 为内联元素增加了额外的高度答案

【问题标题】：Chrome Adds Extra Height to Inline ElementsChrome 为内联元素增加了额外的高度
【发布时间】：2012-03-14 04:31:02
【问题描述】：

我正在尝试为一些文本添加高亮，但我遇到了高亮部分高度的问题。结果因浏览器而异，但最糟糕的可能是 Chrome。以下是说明该问题的页面的链接。

我知道有办法绕过这个增加的高度，但在其他情况下，我选择不走这些路线。任何帮助或见解将不胜感激！

谢谢！

【问题讨论】：

也许您可以提及其他绕过它的方法是什么，以及为什么您拒绝了它们，因此其他人不会提出相同的修复建议？
除非它是非常微妙的东西，否则它在 Chrome、Firefox、IE、Safari 和 Opera 中对我来说都是一样的。
是不是有点微妙，但足够引人注目，让人头疼。您可以看到第二行的黄色背景与其他两行重叠。在 Chrome 中，内联元素增加的高度与周围的元素重叠，而在 FF 和某些版本的 IE 中，内联元素的高度仍然增加，但周围的元素没有重叠。我会使用 inline-block，但我需要将这个突出显示的文本换成多行，如果我使用 inline-block，突出显示将不会包含在文本中，而是会覆盖“块”区域。跨度>
我用来摆脱这种烦人效果的最接近的方法是隐藏包含内联元素的父元素的溢出，从而隐藏增加的高度。这个问题非常奇怪的是，虽然父元素和内联元素的 line-height 和 font-size 设置为 X 数量，但内联元素的高度呈现为 X + ?% （取决于文本的大小），而父母的身高保持一致。在显微镜下观察后，我很确定添加的高度量受到字体下降和上升大小的影响（例如：g f）

【解决方案1】：

在<span> 上设置display: inline-block; 会清除相邻的<p> 行。

【讨论】：