如何清除IE中的链接周围的边框？ [英] How to remove borders around links in IE?

问题描述

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

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

我有大约5个链接都写得像这样，酒吧。在其他浏览器上显示为

但在IE它出来像这样

我从来没有遇到像这样的问题，我已经提交了尝试和解决它迄今为止没有工作。有没有办法使用CSS取出这些边框？

解决方案

TL; DR

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

  a，img {
 border：none; 
 outline：none; 
 } 
  

---

完整版

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

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

唯一的区别是 a 和 img 之间没有逗号 a -tags会套用这项规则

浏览器不一致性（如下所示）很多，因此网络开发人员经常使用css reset，即 https://necolas.github.io/normalize.css/ 或 http://meyerweb.com/eric/tools/css/reset/ 。这将（除了其他很多东西之外）重置像一些元素的边框，边距等，以便它们在不同的浏览器之间更一致。

I have a navigation bar which consists of a <img> elements within their respective <a> elements. However, for some reason in IE its making a dark black border around the images. Its not doing the same in other browsers, I can't seem to figure this out... This is the html that I'm using.

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

I have about 5 links all written like that and I've used CSS to style it into a nav bar. On other browsers it comes out like this

but on IE it comes out like this

I've never encountered a problem like this before and what I've reserached to try and fix it so far haven't worked. Is there a way to take out these borders using CSS?

解决方案

TL;DR

Remove borders from all links and images:

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

---

Full version

If you only want to remove borders from images that are links, you should do the following:

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

The only difference is that there is no comma between a and img meaning only images inside a-tags will have this rule applied

Pro tip: Use a css reset

Browser inconsistencies like this one are numerous, so web developers often use a "css reset" i.e. https://necolas.github.io/normalize.css/ or http://meyerweb.com/eric/tools/css/reset/. This will (among other nifty things) reset things like borders, margins, etc. on a number of elements so they render more consistently across browsers.

这篇关于如何清除IE中的链接周围的边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！