CSS - 如何让一个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; 
} 

它为我原来的问题。但是，显示的图像现在偏移到水平菜单的底部。这是由'display：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

如果你想要的文字（“英语”）被隐藏，比你必须使用<img/>标签，与alt属性，是这样的：

<img src="english-flag.png" alt="English" /> 

您也可以使用一些CSS黑客，但：

1. 用于什么？使用纯HTML可以轻松实现！
2. 这些都是黑客行为，所以他们可能工作或不在不同的浏览器。

一种这样的黑客可以是一个背景设定为<a/>元件，以抵消文本，到溢流设置为隐藏，并设置固定宽度：

a{ 
    padding-left:16px; 
    overflow:hidden; 
    display:block; 
    width:16px; 
    height:16px; 
    url(../images/16by16.png) no-repeat left top;} 

<a href="...">English</a> 

Answer 2

改为将该CSS改为<a>。添加一个display: 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; 
} 

Answer 3

你可以有a标签使用填补了DIV：

a { 
    display: block; 
    height: 16px; 
} 

然后，您可以也从div删除height，因为它会自动增长。