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
How to remove borders around links in IE?
提问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
我有大约 5 个链接都是这样写的,我已经使用 CSS 将它的样式设置为导航栏。在其他浏览器上是这样的
but on IE it comes out like this
但在 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 a
and img
meaning only images inside a
-tags will have this rule applied
唯一的区别是中间没有逗号a
,img
这意味着只有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。