ios上的链接边框更改颜色答案

【问题标题】：Link border changing color on iosios上的链接边框更改颜色
【发布时间】：2014-02-15 06:22:58
【问题描述】：

我有一个嵌套在锚点内的 div，以使整个 div 可点击。这在桌面和 iPhone 上都可以正常工作，问题是当我点击它时。它一定与 :visited 标签有关，但我的 css 不包含类似的东西，它只发生在 iphone 上。

这是我点击链接前后的一些截图。

CSS

.Widget{
padding: 0 0 10px 0;
}
.Widget span.Title{
padding: 10px;
padding-right: 30px;
display: block;
background: rgba(255, 203, 110, 0.6);
font-size: 22px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-top-left-radius: 5px;
-moz-border-top-right-radius: 5px;
}
.Widget span.Content{
display: block;
padding: 5px;
border: 2px solid rgba(255, 203, 110, 0.6);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-bottom-left-radius: 5px;
-moz-border-bottom-right-radius: 5px;
}
.EnquiryLink{
color: #000000;
text-decoration: none;
}

HTML

<a href="/Contact/" class="EnquiryLink">
    <div class="Widget EnquireWidget">
        <span class="Title">Enquire:</span>
        <span class="Content">Make an enquiry here with our contact form.</span>
    </div>
</a>

我相信它正在改变 span.Content 的边框颜色，但我不知道为什么。我的代码中唯一的 :hover 类是特定于相关元素的。

【问题讨论】：

标签： html ios css hyperlink

【解决方案1】：

在我的 iPad（Opera Mini、Safari、Firefox）中遇到了同样的问题。出于某种原因，我的风格已被链接中的某种自己的风格所取代。

我已经在我的样式中添加了“！important”来防止这种情况。有帮助。

.some-block a {
    border: none !important;
}

a.orange-button {
    border: 2px solid #FF6449 !important;
}

【讨论】：

【解决方案2】：

将background-clip: padding-box;添加到a标签内的问题元素中。

【讨论】：

【解决方案3】：

对于悬停应用，您有任何 CSS 规则吗？ ios 可以在第一次触摸时应用悬停。

【讨论】：

不，它们都是特定于相关元素的。

【解决方案4】：

添加

outline: 0;

到班级.EnquiryLink

我总是使用它作为锚点上的默认 css 来删除锚点标签上的轮廓：

a, a:active, a:focus, a:hover{
outline: 0;
}

【讨论】：

不幸的是，这没有奏效。似乎是 span.Content 边框在发生变化，而且没有任何意义。
啊，我明白了。这是 span.Content 死了。我认为它必须处理边框颜色。也许你可以试试这个答案让它跨浏览器：stackoverflow.com/questions/4062001/css3-border-opacity