链接边框在iOS上更改颜色 [英] Link border changing color on ios

问题描述

我在锚点中嵌套了一个div，以使整个div可点击.这在台式机和iPhone上都可以正常工作，问题是我单击它时就遇到了问题.一定是和:visited标签有关的，但是我的css不包括这样的东西，它只发生在iphone上.

I have a div nested within an anchor, to make the entire div clickable. This works fine on a desktop and also on an iPhone, the issue is when I click on it. It must be something to do with the :visited tag, but my css does not include anything like that, and it only happens on the iphone.

这是我单击链接前后的一些屏幕截图.

Here are some screenshots of the link before and after I click on it.

点击前 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类特定于那里的相关元素.

I believe it to be changing the border colour of span.Content, but I don't know why. The only :hover classes within my code are specific to there relevant elements.

推荐答案

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

Add background-clip: padding-box; to the problem element inside the a tag.

这篇关于链接边框在iOS上更改颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！