Question

我有一个嵌套在一个锚中的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的边框颜色，但我不知道为什么。唯一的：我的代码中的悬停类特定于相关元素。

Answer 1

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

我已经添加了＃34;！important＆＃34;以我的风格来防止这种情况。它会有所帮助。

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

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

Answer 2

你有悬停申请的CSS规则吗？ ios可以在第一次触摸时应用悬停。

Answer 3

添加

outline: 0;

上课.EnquiryLink

我总是将此作为锚点上的默认css来删除锚标记上的轮廓：

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

Answer 4

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

在ios上链接边框改变颜色

4 个答案: