在 iOS Safari 中点击链接会在元素周围显示粗的白色边框 - 如何消除它？

Question

问题

在我的网站上，我在任何类型的链接元素（文本、图像、svg 元素、表格单元格）上看到这种超级奇怪的行为：在 iOS 上的 Safari 中长按它们时，在显示链接预览之前会出现一个粗的白色边框。

到目前为止我所尝试过的

由于它仅在 iOS 上显示，不幸的是，我在调试它方面受到了一些限制。

我尝试使用以下最推荐的解决方案通过 iOS Safari 中的链接点击来修复它，但它们都没有解决问题：

html {
    -webkit-tap-highlight-color: transparent;
}
a, a:visited, a img {
    -webkit-background-clip: content-box;
}
input, textarea, button, select, label, a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
}

解决方案思路？

有谁知道或有想法，我如何摆脱这个边框 - 或者至少让它看起来“透明”？

非常感谢！

Answer 1

已解决：看起来粗的白色边框不是边框，而是与元素/链接元素的背景色有关。并且可以通过

:active

状态来控制。

通过将其添加到我的 CSS 来修复：

a:active {
    background-color: transparent;
}

解决方案受到此处答案的启发：https://stackoverflow.com/a/12686281/5750030

Answer 2

这个解决方案不起作用。已在 Apple iPhone 上尝试过多种浏览器。