CSS - 如何使 A 链接在带有背景图像的 DIV 中工作

Question

tab-ver.tab {

    background: url(../images/16by16.png) no-repeat center center;
    text-indent: -10000em;
    height: 16px;
    width: 16px;
    padding: 4px 1px;
    margin-right: 1px;
    margin-left: 50px;
}

<div id="tab-ver" class="tab"><a href="http://www.yahoo.com">English</a></div>

上述脚本的问题是链接根本不起作用。如果用户单击 16by16.png 图像，则不会将用户重定向到 yahoo.com。

如何解决这个问题？

谢谢

// update001//
I have tried the following suggestion:

#tab-ver.tab {
    text-indent: -10000em;
}
#tab-ver.tab a{
    background: url(../images/16by16.png) no-repeat center center;
    height: 16px;
    width: 16px;
    padding: 4px 1px;
    margin-right: 1px;
    margin-left: 50px;
    display: block;
}

它适用于我原来的问题。但是，显示的图像现在偏移到水平菜单的底部。它是由“显示: block ”引起的。但是，如果我删除“display:block”，则图像将不可见。

谢谢

// update 1 //

Based on the suggestion, the following script works best for me

#tab-en-ver.tab a {
    background: url(../images//16by16.png) no-repeat center center;
    height: 16px;
    width: 16px;
    padding: 4px 1px;
    margin-right: 1px;
    margin-left: 50px;
    text-indent: -10000em;
}

不过，这个建议确实有一个问题。文字“英语”与图像混合在一起。我不知道如何从链接中删除文本“英语”。

通过添加以下额外规则将导致图像消失。

#tab-ver.tab {
 text-indent: -10000em; 
}

有什么想法吗？

Answer 1

将该 CSS 提供给 <a>反而。添加 display: block所以它将显示为 block 级元素，如 <div> . <div>将展开以适应 <a> .

编辑:尝试inline-block相反，看看它是否有帮助。

#tab-ver.tab a {
    display: inline-block;
    background: url(../images/16by16.png) no-repeat center center;
    text-indent: -10000em;
    height: 16px;
    width: 16px;
    padding: 4px 1px;
    margin-right: 1px;
    margin-left: 50px;
}