CSS选项卡不能用作链接

Question

这是我遇到问题的网站 http://www.iaddesign.com/avola

当我尝试点击标签时，它不会工作。我对css有悬停影响，无法弄清楚如何使标签工作。

让我知道谢谢。

Answer 1

<a>中的链接（li）标记需要display:block才能使用宽度和高度规则。我刚刚在firebug中进行了修改，它解决了这个问题。

#navigation li a 
{ 
  display:block; 
}

此外，我建议您将链接设置为以下格式：

<li>
  <a href="index.php"><span>Index</span></a>
</li>

然后隐藏视觉渲染的内跨距：

#navigation li a span 
{ 
  display:none; /* or position:absolute; top:-2000px; */
}

这样，当CSS被禁用时，您的导航仍然可用。

Answer 2

虽然Jonathan是正确的，但您也可以考虑在<span>代码中添加不可见的<a>以获取辅助功能。

Answer 3

乔纳森是对的。这是我的额外2美分。

您的标签的标记为：

<li id="home"><a href="index.php" title=""></a></li>

<a>的默认显示行为是inline，它与<a>的开始和结束标记之间的空内容相结合，意味着浏览器上没有任何内容可见。

Answer 4

你也可能想把背景放在一个元素上（如果你支持ie6），以避免使用javascript hacks来支持：将鼠标悬停在非元素上。