Safari中链接边界的白色空白



我有一个链接,看起来像这样:

Документи

问题是,在Safari中,当"Документи"下划线时,字母"Д"one_answers"会断行,并且在链接行中有一小块空白。如何消除这些白色的空白链接?

删除所有<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

最新更新