删除 IE 10 兼容性视图中的蓝色边框答案

【问题标题】：Remove Blue border in IE 10 Compatibility View删除 IE 10 兼容性视图中的蓝色边框
【发布时间】：2013-05-25 11:29:49
【问题描述】：

如何删除或不显示每个带有图像的锚点中的边框链接？顺便说一句，浏览器设置处于兼容模式。其他问题的答案不足以解决我的问题。我猜是因为它只适用于较低版本的 IE。

编辑：

我目前正在我的客户需要我的地方创建自定义共享按钮。

<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;
}

这是 IE10 的样子：

【问题讨论】：

您是否尝试将border="0" 或CSS 中的border: none 添加到<img>？它适用于所有版本的 IE。
是的，我已经提出了这些建议，但没有一个能解决我的问题。 :(
仅将其添加到 img 可能还不够，请在 CSS 中尝试 a img {border: none}。您可能还需要通过添加!important 来强调它
我已经用我的 CSS a {outline : none !important;} a img {outline : none !important;} img {border : 0 !important;} 添加了这些。没有什么变化。这有问题吗？
不正确的 HTML 。你混淆了 HTML 和 CSS 语法：<img height="20px" 。如果我是你，我会用 Fiddler 或类似的工具检查 CSS 以找出谁给了你边框

标签： html css cross-browser hyperlink internet-explorer-10

【解决方案1】：

这个怎么样，试试添加这样的东西

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

【讨论】：

万岁！奇迹般有效！谢谢@kyawagvin，无论如何我有点好奇为什么IE10会发生这种情况:(

【解决方案2】：

我通常将此作为我在 CSS 中正常默认设置的一部分：

img {border: none;}

这不会对其他浏览器产生负面影响，并且如果您将其放置在通用 css 文件的顶部附近，则很容易在以后覆盖，例如

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

增加的特异性会给你的图像添加一个丑陋的边框，就像 IE 喜欢做的那样。

【讨论】：

【解决方案3】：

我在使用 IE10 时遇到了完全相同的问题。我刚刚为 a 标签设置了 CSS 规则，并将文本颜色设置为白色。这会从锚图像周围移除蓝线。

【讨论】：