Link border changing color on ios

问题

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.

Before Click After Click

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>

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.

回答1:

Faced the same issue in my iPad (Opera Mini, Safari, Firefox). For some reason my style has been replaced with some own style in links.

I've added "!important" to my styles to prevent this. It helps.

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

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

回答2:

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

回答3:

Do you have any CSS rules for hover applying? ios can apply the hover on first touch.

回答4:

Add

outline: 0;

to the class .EnquiryLink

I always use this as default css on anchors to remove the outline on anchor tags:

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

来源：https://stackoverflow.com/questions/21329602/link-border-changing-color-on-ios

标签

html

ios

css

hyperlink