html - 在 IE 中显示在 CSS 背景图像上的文本，而非 FF

Question

我正在尝试让 Thesis 主题在 Wordpress 中运行，它几乎是完美的。对于导航菜单，我想使用图像而不是文本。我的解决方案是通过 css 设置背景图片:

ul.menu .tab-2 a {background:url(images/myimage.jpg) no-repeat;background-color:transparent;width:81px;height:60px;margin:0px;padding:6px;border-style:none;}

这在除 IE 之外的任何地方都可以正常工作。您只能看到图像，而看不到 Thesis 为该导航项写出的文本:

<li class="tab tab-2"><a href="http://www.mysite.com/about" title="About Us">About Us<!--[if gte IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 

然而，在 IE 中，href 文本确实显示在背景图像之上。我想这是我期望发生的事情，所以我惊喜地发现它在所有其他浏览器中都无法正常工作。

我想弄清楚的是，是否有一种方法可以让背景图像显示在 href 文本的顶部，从而有效地将其遮盖。我曾尝试破解 Thesis 以禁止写出文本，该文本适用于除一个菜单项之外的所有菜单项，那是因为我写的是类别，而不是页面。

我真的很想使用 Thesis 的导航菜单而不是我自己的导航菜单，因为我敢肯定那样我会遇到更多麻烦让下拉菜单在所有浏览器中看起来都不错，而且我的 css 也不是那么先进。而且我认为没有办法告诉 Thesis 使用图像而不是导航菜单项的文本。

我已经盯着它看了好几个小时了，显然我不再想清楚了。

Answer 1

尝试添加:

display:block;
text-indent:-5000em;
overflow:hidden;

...您当前的规则。

有些人更喜欢其他方式来进行图像替换，但这是 IMO 最常见的方式。