css：在跨度上设置背景颜色会导致背景模糊文本

Question

解释我的问题的最简单方法是通过示例：

<p style="line-height:1;">
<span style="background-color:yellow">ggggg<br>TTTT
</span>

或者如果您愿意，https://jsfiddle.net/k17760zr/

您可以看到“T”上的突出显示与隐藏文本的“g”的底部重叠。但是，如果你删除突出显示，那么两条线之间在视觉上没有干扰，甚至可以使用鼠标来选择T而不会遮挡g，所以它看起来并不像线条重叠。

我意识到我可以通过改变线条高度或设置整个段落的背景颜色来解决这个问题，但这些在我的情况下并不合适。有没有什么方法可以保留线条高度，仍然突出显示段落中的单个跨度，而不突出显示与上面的线条重叠？

Answer 1

在display: inline-block上使用<span>。

Demo

span {
  display: inline-block;
}

<p style="line-height:1;"> <span style="background-color:yellow">ggggg<br />TTTT
    </span>
</p>

Answer 2

您可以增加p。

的行高

<p style="line-height:1.2;"> 
    <span style="background-color:yellow">ggggg<br />TTTT</span>
</p>