避免高亮选择与 CSS 重叠答案

【问题标题】：Avoid Highlight Selection Overlap with CSS避免高亮选择与 CSS 重叠
【发布时间】：2020-10-20 23:41:31
【问题描述】：

当我选择line-height 低于font-size 的文本时，如何避免突出显示重叠？

示例：

*::selection {
  background-color: grey;
}

p {
  font-size: 24px;
  line-height: 20px;
}

&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;

我能够解决此问题的唯一方法是制作 background-color transparent 并更改文本颜色。不过我还是想保留背景颜色。

示例

*::selection {
  background-color: transparent;
  color: red;
}

p {
  font-size: 24px;
  line-height: 20px;
}

&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;

【问题讨论】：

标签： css

【解决方案1】：

我认为没有办法，选择背景必须覆盖整个字母表，包括所有特殊字符，如 ƒ、È、¡ 等。

【讨论】：

【解决方案2】：

我遇到了完全相同的问题，这与网站的美学非常相关。特别是衬线字体带有很高的行高，如果您将它们用于短文本和更大的字体大小，这绝对是太多了。令人失望的是没有解决方案。

如果背景颜色不透明，为什么您会看到所选文本的背景完全重叠？浏览器必须应用类似乘法的效果。

文本选择突出显示真正取决于什么？似乎它取决于字体的本机行高，尤其是一些免费的网络字体，高得离谱，让我们说错了。但是没有办法纠正它。

【讨论】：

【解决方案3】：

嗯，呃...不，不是真的。

这是不可能的，因为背景覆盖了所有的文本，所以如果行高低于字体大小，就会有重叠。但是，您可以在某种程度上通过将背景设置为稍微（并且只是非常轻微）透明背景来隐藏背景重叠。

有点像这样：

*::selection {
    background-color: rgba(0, 125, 255, 0.99);
}

p {
    font-size: 24px;
    line-height: 20px;
}

&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;

【讨论】：

这是一件很好的事情，尤其是对于深色突出显示，因为线条几乎消失了，不幸的是，这是以牺牲另一件事为代价的，即除了最后一个字符的下部突出显示的线消失了，因此美学（使用@fjlw 描述）以另一种方式被打乱。不过，用户可能不会注意到，因此这可能是一种实用的方法。
@AHaworth 感谢您的评论！是的，它确实切断了上面的线，但它在每个浏览器中确实不同。无论如何，如果行高不小于文本太多，它通常可以正常工作。