iOS a：访问过的链接显示默认的紫色

Question

在我的网站上，有一些页脚链接在访问链接时显示iOS设备的错误边框颜色。这种情况发生在适用于iOS的Chrome和Safari上。

桌面

的iOS

我搜索了我的代码，我没有在任何地方设置这种风格。 我试过在小提琴/编码器中复制它，但由于它们不允许你重定向，我看不出移动设备的a:visited是什么样的。

代码

.productsalessection {
  width: 34%;
  padding-top: 10px;
  padding-right: 1%;
  padding-bottom: 10px;
  float: left;
  font-family: Lato, sans-serif;
}

.productsalesbox {
  width: 100%;
  padding: 14px 12px;
  float: left;
  border-right: 1px solid #e2e2e2;
}

.productsalesbadge {
  width: 80px;
  height: 100%;
  margin-right: 6px;
  float: left;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
}

img {
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
}

.productsalesheading {
  margin-top: 3px;
  color: #444;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
}

.productsalestext {
  font-size: 12px;
  line-height: 14px;
  color: #777;
}

<a class="w-clearfix productsalessection" target="_blank" href="http://www.google.com">
  <div class="w-clearfix productsalesbox">
    <div class="productsalesbadge"><img src="http://www.chicmarket.com/images/SJ.svg">
    </div>
    <div class="productsalesheading">Trusted</div>
    <div class="productsalestext">We proudly maintain a strong relationship with our customers.</div>
  </div>
</a>

更改a:visited的颜色。

a:visited {
  color: #C8C8C8;
}

但是这个解决方案并不理想，因为这会弄乱我网站上的其他标签。

我也试过了。

a:visited {
  color: rgba(0, 0, 0, 0.0);
}

但不是让颜色透明，而是使边框变黑。

我通常不会发布指向外部网站的链接，但是如果你想看看自己的问题，可以查看here。

是否有一个简单的解决方法，不需要我为每个标签设置a:visited颜色？

Answer 1

看起来这只发生在移动设备<a>标签内的div的边框上。为了解决这个问题，我不仅要为color: rgba(0, 0, 0, 0.0);设置a:visited，而且还必须选择具有边框的特定div。

a:visited .productsalesbadge {
    color: rgba(0, 0, 0, 0.0);
}

这完全消除了我在手机上看到的紫色访问边界。