Html 如何在 IE 中删除链接周围的边框?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7910209/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 11:16:01  来源:igfitidea点击:

How to remove borders around links in IE?

htmlcss

提问by Zeeno

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.

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

<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 good bar

我有大约 5 个链接都是这样写的,我已经使用 CSS 将它的样式设置为导航栏。在其他浏览器上是这样的好酒吧

but on IE it comes out like this Bad bar :(

但在 IE 上它是这样出现的 坏酒吧:(

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?

我以前从未遇到过这样的问题,到目前为止我尝试修复的方法都没有奏效。有没有办法使用 CSS 去掉这些边界?

回答by Mathias Bak

TL;DR

TL; 博士

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 aand imgmeaning only images inside a-tags will have this rule applied

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

Pro tip: Use a css reset

专业提示:使用 css 重置

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.

像这样的浏览器不一致很多,所以 web 开发者经常使用“css reset”,即https://necolas.github.io/normalize.css/http://meyerweb.com/eric/tools/css/reset/. 这将(以及其他漂亮的东西)在许多元素上重置边框、边距等内容,以便它们在浏览器中的呈现更加一致。

回答by Jon Newmuis

I believe IE puts borders around images that are links. So you should be able to remove this by saying:

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

a img {
    border: 0;
}

回答by Michael Sazonov

add style="border: none;"to whatever creates the border or create a css with this attribute.

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