tab-ver.tab {

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>

上述脚本的问题是a链接根本不起作用。如果用户单击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

将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 2

您可以使用以下代码填充div a标记：

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

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

Answer 3

如果您希望隐藏文字（“英语”），则需要使用<img/>标签，并使用alt属性，例如：

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

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

为什么？用简单的HTML来做这件事很容易！
这些都是黑客攻击，所以它们可以在不同的浏览器中工作或不工作。

其中一个黑客可能是设置<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>

CSS - 如何使用背景图像使A链接在DIV内部工作

tab-ver.tab {

3 个答案: