文本选择（蓝色背景）仅填充 Chrome 顶部的填充

Posted 2023-03-06

【中文标题】文本选择（蓝色背景）仅填充 Chrome 顶部的填充

【英文标题】：Text selection (the blue background) fills only padding at top in Chrome

【发布时间】：2018-01-24 13:13:16

【问题描述】：

我有一个在顶部和底部有填充的内联元素。如果我选择文本，在 Chrome 中，选择填充（垂直）顶部填充，但不填充底部填充：

<span style="background-color:grey; padding: 10px 0;">selected this text</span>

运行该代码并选择文本。在我的 Chrome（Mac 上的版本 60）中，它看起来像这样（蓝色是选择）：

为什么选择只拉伸到顶部而不是底部？要么我希望它在两个方向上拉伸，要么至少没有。我怎样才能做到这一点？ Hopfully 没有额外的标签。

顺便说一句：在 Firefox 中它没有方向延伸，在 Safari 中只是到底部？！

【问题讨论】：

将显示类型更改为 inline-block 不会拉伸选择，无论如何在 Chrome 中

【参考方案1】：

不知道发生这种情况的确切原因，但更改它display: inline-block 现在修复它

【讨论】：

本意是让它双向拉伸，现在没有了

@rebecca 是的，最好是双向。但是，正如我上面所说，完全不拉伸也是向前迈出的一步。

我的错，对不起！