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

【问题标题】：putting an img tag inside of an a href tag causes a border around image in IE将 img 标记放在 a href 标记内会导致 IE 中的图像周围出现边框
【发布时间】：2011-08-29 07:52:13
【问题描述】：

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

这里有一些代码：

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

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

【问题讨论】：

标签： html css internet-explorer

【解决方案1】：

简单的修复，在你的样式表中创建一个类似这样的样式：

a img{
border:0;
}

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

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

a img{
margin-top:600px;
}

【讨论】：

效果很好，但是我在 IE 中再次遇到了另一个小问题，我在一些图像上设置了上边距，当我点击它们时，大小周围有一个灰色的条纹框当我点击它时，有什么想法可以删除它吗？
听起来可能是您实现的更改颜色 JS。尝试从 img 中删除 margin-top 并改为应用于 a 标签。如果这不起作用 - 你能提供一个实时链接或屏幕截图吗？
您可能必须将样式 'display:inline-block' 添加到 'a' 类中才能使其也能识别页边距。
@user541597，如果此答案效果很好，您可能希望将其作为已接受的答案进行检查。这将告诉其他用户他们不需要尝试解决您的问题。至于您的其他问题，您可以将其作为一个新问题提出来获得最佳结果。
就像@amccormack 所说，如果它对您有用，您最好将此答案标记为正确，然后针对新故障发布另一个问题 - 这样您将有更广泛的受众来帮助解决这个问题最新一期。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

a img{outline:none;}

【讨论】：