html图像链接悬停显示图像下方的 anchor 框

Question

在使用图像作为链接时遇到问题。问题是，当鼠标悬停在图像上时，边框会根据需要突出显示，但在图像底部还有一个突出显示的额外框，我认为这是 anchor ，firefox 元素检查器显示为 anchor 图像宽度和行高高度。我如何摆脱这个额外的盒子或者它是什么？

谢谢

html是

<div class="linkbox">
<a href="gardenbirds.html"
<img src="pics-links/dnc23011.jpg"title="Garden birds"
alt="Garden birds"class="linkpic"><a/><br> 
<a href="gardenbirds.html">&nbsp;Garden birds&nbsp;<a/> 
</div>

CSS 是

    .linkbox {
    text-align: center;
    float: left;
    font-family: Arial,Helvetica,sans-serif;
    font-style: normal;
    text-transform: none;
    width: 170px;
    height: 175px;
    font-weight: bold;
    line-height: 20px;
    font-size: 10pt;
    }
   .linkpic {
    border: 1px solid white;
    }
    a:link {
    font-weight: bold;
    font-family: Arial,Helvetica,sans-serif;
    color: #46484e;
    text-decoration: none;
    }
    a:visited {
    font-family: Arial,Helvetica,sans-serif;
    font-weight: bold;
    color: #64666c;
    text-decoration: none;
    }
    a:hover  {
    background-color: white;
    text-decoration: none;
    }
    a:hover img { 
    border: 1px solid #46484e; 
    }

所以图片是链接，文字是链接。文本悬停在白色，图像边界悬停在黑色。在 firefox 中一切正常，但在 IE 中，它在图像和文本之间显示了一个额外的白色悬停区域

Answer 1

在您的链接中应用此 css:

a img {
  border: none;
}