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

所以图像是链接，文本是链接。文字悬停在白色，图像边框徘徊在黑色。所有在Firefox中都可以正常但在IE中它在图像和文本之间显示了一个额外的白色悬停区域

Answer 1

在您的链接中应用此css：

a img {
  border: none;
}

Answer 2

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

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

作用于图像锚

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

2 个答案: