Html 将 img 标签放在 a href 标签内会导致 IE 中的图像周围出现边框

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6066652/
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 08:41:04  来源:igfitidea点击:

putting an img tag inside of an a href tag causes a border around image in IE

htmlcssinternet-explorer

提问by user541597

I have some HTML where I have img tags inside of an href tag to use as a button. Everything works fine except that when I open it in IE, I get a border around the img tag.

我有一些 HTML,其中在 href 标签内有 img 标签可用作按钮。一切正常,除了当我在 IE 中打开它时,我在 img 标签周围有一个边框。

Here's some code:

这是一些代码:

<a href="javascript:changecolor(1)" title="Click Again to Change Color" style="cursor:pointer; text-decoration:none"><img src="button.png" width="25" height="25" style="margin-top:600px;" /></a>
<a href="javascript:changecolor(2)" title="Click Again to Change Color" style="cursor:pointer"><img src="button.png" width="25" height="25" style="margin-top:600px;" /></a>
<a href="javascript:changecolor(3)" title="Click Again to Change Color" style="cursor:pointer"><img src="button.png" width="25" height="25" style="margin-top:600px;" /></a>
<a href="javascript:changecolor(4)" title="Click Again to Change Color" style="cursor:pointer"><img src="button.png" width="25" height="25" style="margin-top:600px;" /></a>
<a href="javascript:changecolor(7)" title="Click Again to Change Color" style="cursor:pointer"><img src="button.png" width="25" height="25" style="margin-top:600px;" /></a>
<a href="javascript:changecolor(6)" title="Click Again to Change Color" style="cursor:pointer"><img src="button.png" width="25" height="25" style="margin-top:600px; text-decoration:none" /></a>

How can I get rid of the blue border, which only appears in IE?

我怎样才能摆脱只出现在 IE 中的蓝色边框?

回答by Dan

Simple fix, in your stylesheet create a style similar to this:

简单的修复,在你的样式表中创建一个类似于这样的样式:

a img{
border:0;
}

In your case, you could update your style to include some of the inline styles you have in your HTML. For example, your stylesheet would be updated to:

在您的情况下,您可以更新样式以包含 HTML 中的一些内联样式。例如,您的样式表将更新为:

a{
cursor:pointer;
text-decoration:none
}

a img{
margin-top:600px;
}

回答by Amareswar

Add border="0" attribute to the img tag

给img标签添加border="0"属性

回答by GSoft Consulting

Regarding the minor issue with Internet Explorer and the grayed box around the anchor tag - this is outline. To hide the outline box you can use following CSS:

关于 Internet Explorer 的小问题和锚标记周围的灰色框 - 这是大纲。要隐藏大纲框,您可以使用以下 CSS:

a img{outline:none;}