如何去除 IE 中链接周围的边框？

Question

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

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

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

但在 IE 上是这样的

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

原文由 Zeeno 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

TL;博士

从所有链接和图像中删除边框：

 a, img {
    border:none;
    outline:none; /* this breaks accessibility */
}

---

**完整版本**

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

 a img {
    border:none;
    outline:none; /* this breaks accessibility */
}

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

专业提示：使用 CSS 重置

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

关于可访问性的说明

经常被开发人员判断为令人不安的虚线轮廓对于键盘用户来说具有非常重要的功能。

你 永远不 应该删除它。如果这样做，则需要通过添加 :focus 样式 来找到焦点所在的另一个视觉指示器

原文由 Mathias Bak 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我相信 IE 会在作为链接的图像周围放置边框。所以你应该能够通过说：

 a img {
    border: 0;
}

原文由 Jon Newmuis 发布，翻译遵循 CC BY-SA 3.0 许可协议