Remove Blue border in IE 10 Compatibility View

2019-04-09 21:36发布

问题:

How can I remove or just don't display the border links in every anchor with image? By the way, browser settings is in compatibility mode. Answers from other question doesn't suffice to solve my problem. I guess because it only applies with lower version of IE.

EDIT:

I'm currently creating a Custom share buttons where my client requires me.

<div>
    <a onClick="window.open('https://twitter.com/intent/tweet?original_referer=#shareLink#&text=#shareTitle#&tw_p=tweetbutton&url=#shareLink#','sharer','toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)">
        <img height="20" src="/images/chicklets/Twitter_Tweet.png" />
    </a>
</div>
<div>
    <a onClick="window.open('http://www.facebook.com/sharer.php?s=100&amp;p[title]=#shareTitle#&amp;p[summary]=#shareDesc#&amp;p[url]=#shareLink#&amp;p[images][0]=images/Telos.jpg','sharer','toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)">
        <img height="20" src="/images/chicklets/FaceBook_Share.png">
    </a>
</div>

<div>
    <a onClick="window.open('http://www.linkedin.com/shareArticle?mini=true&url=#shareLink#&title=#shareTitle#&summary=#shareDesc#','sharer','toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)">
        <img height="20" src="/images/chicklets/LinkedIn_Share.png">
    </a>
</div>      

<div>
    <a onClick="window.open('https://plus.google.com/share?url=#shareLink#','sharer','toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)">
        <img height="20" src="/images/chicklets/Google_PlusOne.png">
    </a>
</div>

CSS:

a {
    outline : none;
    text-decoration: none;
}
a img {
    outline : none;
}
img {
    border : 0;
    border-style: none;
}
div {
    float: left;
    padding-right: 10px;
}

Here's what it looks like with IE10:

回答1:

how about this, try to add something like this

<img src="blah" style="border-style:none;">


回答2:

I usually use this as part of my normal defaulting set up in my CSS:

img {border: none;}

This doesn't effect the other browsers negatively and is easy to over-ride at a later point if you place this near the top of you general css file e.g

img {border: none;}
img.some-class {border: 1px double blue}

Where the increased specificity will add an ugly border to your image just like IE loves doing.



回答3:

I was having the exact same issue with IE10. I've just set up a CSS rule for the a tag and set the text colour to white. This removes the blue line from around an anchor image.