如何去除IE中链接周围的边框？ [复制]答案

【问题标题】：How to remove borders around links in IE? [duplicate]如何去除IE中链接周围的边框？ [复制]
【发布时间】：2016-05-30 05:08:39
【问题描述】：

我有一个导航栏，它由各自的<a> 元素中的<img> 元素组成。然而，由于某种原因，在 IE 中它在图像周围制作了一个深黑色边框。它在其他浏览器中不一样，我似乎无法弄清楚......这是我正在使用的html。

<li>
   <a href="#">
      <span id="nav1">
         <img src="tt_1.png" />
      </span>
   </a>
</li>

我有大约 5 个链接都是这样写的，我使用 CSS 将其设置为导航栏。在其他浏览器上，它会像这样出现

但在 IE 上却是这样的

我以前从未遇到过这样的问题，而且我为尝试修复它而进行的研究到目前为止还没有奏效。有没有办法使用 CSS 去除这些边框？

【问题讨论】：

标签： html css

【解决方案1】：

TL;DR

去除所有链接和图片的边框：

a, img {
    border:none;
    outline:none;
}

完整版

如果您只想从作为链接的图像中删除边框，您应该执行以下操作：

a img {
    border:none;
    outline:none;
}

唯一的区别是a 和img 之间没有逗号，这意味着只有a-tags 中的图像才会应用此规则

专业提示：使用 CSS 重置

像这样的浏览器不一致的情况很多，因此 Web 开发人员经常使用“css 重置”，即 https://necolas.github.io/normalize.css/ 或 http://meyerweb.com/eric/tools/css/reset/。这将（以及其他漂亮的东西）重置许多元素上的边框、边距等内容，以便它们在浏览器中更一致地呈现。

【讨论】：

我添加了一个 outline:none 样式来移除 IE 中活动链接周围的虚线边框。
Jonathan Newmuis 的回答更正确
我已更新此答案以避免导致一些人更喜欢 Jonathan Newmuis 的答案的意外后果。
outline: none 的可访问性很糟糕，完全不需要解决问题。

【解决方案2】：

我相信 IE 会在链接的图像周围设置边框。因此，您应该可以通过以下方式删除它：

a img {
    border: 0;
}

【讨论】：

我认为这是最好的答案，因为它达到了特定的意图，接受的答案可能会产生意想不到的后果。

【解决方案3】：

将style="border: none;" 添加到任何创建边框或使用此属性创建css。

【讨论】：

这被否决了。我仍然发现这在仅将样式应用于一个元素时很有用。这也是发送 HTML 电子邮件时的一个好习惯，在这种情况下，您无法创建 CSS 规则。
永远不要在 html 文档中应用样式。
@IliasBennani 实际上，任何标准都对此没有限制。此外，如果没有内联 CSS，您将无法为任何电子邮件设置样式。同样，它对于具有自定义样式/相对行为/动画的交互式元素也很有用。