图像导航使用文本缩进

Question

我正在尝试为我的网站创建一个简单的图像导航，使用CSS声明list-item（li）的background-image属性。问题是，当我使用text-indent将图像放在屏幕外时，链接不再存在（屏幕上也是我认为的）。任何帮助将不胜感激。这是我的XHTML：

<div id="nav">
  <ul>
    <li class="current about">
      <a href="#about" title="about">about</a>
    </li>
    <li class="contact">
      <a href="#contact" title="contact">contact</a>
    </li>
    <li class="networks">
      <a href="#networks" title="networks">networks</a>
    </li>
  </ul>
</div>

这是我的CSS：

#nav li {
   display: block;
   float:left;
   background-image: url("images/nav-normal.png");
   height:47px;
   text-indent: -9999px;
}

我还为各个列表项设置了背景位置，因为我正在使用image sprites。提前谢谢！

Answer 1

将该样式应用于#nav li a。否则li内的所有内容（包括链接）都会移出屏幕。