HTML 图像链接悬停在图像下方显示锚框

Question

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

谢谢

该 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; 
    }

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

Answer 1

在您的链接中应用此 css：

a img {
  border: none;
}

Answer 2

以上似乎都不起作用。导致额外突出显示区域的代码似乎是

a:hover  {
background-color: white;
text-decoration: none;
}

作用于图像定位点