Safari中链接边界的白色空白

Question

我的链接看起来像这样：

      Документи
 

问题是在Safari中，当“Документи”加下划线时，字母“Д”和“у”剪切线，并且链接线上有小的空白区域。 如何删除链接中的这些空白？

Answer 1

删除所有<a>元素的下划线

在CSS中你可以这样做：

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

仅删除西里尔语类

的下划线

或者仅限西里尔语链接：

a.cyrillic {
    text-decoration:none;
}

a.cyrillic:hover {
    text-decoration:none;
}

这是一个JSFiddle来澄清。

这会从链接中删除下划线。它绝不是完美的（如果你想保留下划线）但它至少通过完全删除它来解决问题。当然，这假设您的链接以某种方式着色

border-bottom加下划线

可以使用CSS border-bottom样式获得所需的结果：

a.cyrillic {
    border-bottom: 1px solid currentColor;
    text-decoration: none;
}
a.cyrillic:hover {
    border-bottom: 1px solid currentColor;
    text-decoration: none;
}

显然，您的HTML <a>元素应该是：

<a href="#" class="cyrillic">Документи</a>

这是另一个要澄清的JSFiddle。