光标显示在链接方式下很远

Question

我注意到在不同的浏览器中有一种奇怪的行为，当我从底部悬停一个文本链接时，光标甚至在悬停文本之前就开始显示在链接下面，文本的大小是85 of，而行高是61 of。

font-size: 85px;
line-height: 61px;

是因为文字太大了吗？！下面是一个示例https://jsfiddle.net/rcdsqf2e/

为了避免这种情况，我不得不添加一个透明的区域，是否有更好的解决方案使光标只显示链接的区域？

​

​

Answer 1

正常行为

我相信这是正常的行为。考虑一下这个HTML

<ul>
  <li><a href="#">Normal link</a></li>
  <li><a href="#">Ag</a></li>
</ul>

当在链接中的字母上方盘旋时，需要在“行”(就像写在上面的行)下面的字母留出空间，例如小写字母"g“或"y”。

电位修正

至于如何解决您的问题，我认为最好的方法是通过使用伪元素更改游标。

a {
  position: relative;
}
a::after {
  content: "";
  position: absolute;
  cursor: default;
  
  left: 0;
  bottom: -30%;
  height: 30%;
  width: 100%;
}

更好的解决办法

我编辑了我的信息，以分享一个更好的解决方案，因为我对我以前分享的信息并不满意。只需overflow: hidden到您的"a“标签。

a {
  overflow: hidden;
}

然而，这将切断“书写线”以下的字母，如以上链接示例所示。如果将来不想切断这些字母，可以删除overflow: hidden;，或者添加填充：

a {
  overflow: hidden;
  padding-bottom: 3%;
}