如何删除IE中链接的边框？

Question

我有一个导航栏,它由<img>各自<a>元素中的元素组成.然而,由于某种原因,在IE中它在图像周围形成了深黑色边框.它在其他浏览器中没有做同样的事情,我似乎无法弄明白......这是我正在使用的HTML.

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

我有大约5个链接都是这样写的,我用CSS将它设计成导航栏.在其他浏览器上,它就像这样

但在IE上,它就是这样的

我之前从未遇到过这样的问题,到目前为止我试图修复它的问题还没有成功.有没有办法用CSS取出这些边框？

Answer 1

TL; DR

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

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

完整版本

如果您只想从链接图像中删除边框,则应执行以下操作:

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

唯一的区别是之间没有逗号,a并且img只有a-tags中的图像才会应用此规则

专业提示:使用css重置

像这样的浏览器不一致很多,所以Web开发人员经常使用"css reset",即https://necolas.github.io/normalize.css/或http://meyerweb.com/eric/tools/css/reset/.这将(除了其他漂亮的东西之外)重置许多元素上的边框,边距等内容,以便它们在浏览器中更加一致.

Answer 2

我相信IE会将边界放在链接的图像上.所以你应该能够通过说:

a img {
    border: 0;
}

Answer 3

添加style="border: none;"到创建边框的任何内容或使用此属性创建css.