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

解决方案的想法？

有谁知道，或者有一个想法，我怎样才能摆脱这个边界- 或者至少也让它看起来“透明”？

非常感激！

标签： csshyperlinkbordermobile-safarimobile-webkit

Answer 1

已解决：似乎粗白色边框不是边框，而是与元素/链接元素的背景颜色有关。并且可以通过:active状态来控制。

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

a:active {
    background-color: transparent;
}

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