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

Question

问题

在我的网站上，我在任何类型的 linked 元素（文本、图像、svg 元素、table 单元格）上看到了这种超级奇怪的行为：在 [=] 上的 Safari 中长按它们时52=]，在显示 link 预览之前出现白色粗边框。

到目前为止我尝试了什么

由于它只在 iOS 上显示，不幸的是，我的调试有点受限。

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

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;
}

受此处答案启发的解决方案：

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

Tapping links in iOS Safari shows a thick white border around element - how to get rid of it?

css

border

hyperlink

mobile-safari

mobile-webkit