html - 使用边框底部在 Span 中选择文本时文本选择跳跃

问题描述

我注意到 2019 年 9 月 10 日 Chrome 77.0.3865 的发布有一个奇怪的行为。

如果我有一个带边框底部的跨度，这会在您选择文本时导致跳跃行为。当鼠标在边框上方时，文本选择将跳转到第一行。

在下面的照片中，我当前正在选择文本，但正如您所见，所选文本位于第一行。

我不确定这是否是最近 Chrome 版本中的错误，或者您是否不应该为跨度添加边框（尽管目前，这是我知道控制跨度下划线厚度的唯一方法）。

这是一个带有确切代码的 JSFiddle。我只能在 Chrome 版本 77.0.3865 上重现此错误。但它同时出现在 Mac 和 PC 计算机上。

这是代码。

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p><span>My first paragraph. My first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraphMy first paragraph.</span></p>

</body>
</html>

下面的 CSS

p {
  line-height: 31px
}

span {
  border-bottom:2px solid black
}

标签： htmlcssgoogle-chrome

html - 使用边框底部在 Span 中选择文本时文本选择跳跃

问题描述

解决方案

推荐阅读