IE与Firefox使用li a:hover的差异以及解决方案

dn001 2008-10-23 21:28:07

考虑这样一种 CSS 控制 li 的显示效果，如下图所示：

我的本意是通过 CSS 控制 li a:hover 的样式，在鼠标停留到具体的链接时，将该链接行的背景色设置为灰色，同时字体的颜色设置为白色。

但是在IE6中测试发现，只有当鼠标移到链接的文字上时，才能有hover的效果（如上图所示，当鼠标指针超出了链接文字的范围，不能出现hover的效果）。
而同样的代码内容，在Firefox浏览器中确可以正常的运行。下图展示了在Firefox中的使用效果。

以下是上面实例内容的html和css代码：

<div>

<ul;id="vlist08">

<li><a;href="http://www.microsoft.com">Microsoft</a></li>

<li><a;href="http://www.google.com">Google</a></li>

<li><a;href="http://www.apple.com">Apple</a></li>

</ul>

</div>

#vlist08
{
margin:0
padding:0
list-style:none
width:200px
}

#vlist08;li
{
border-bottom:1px;solid;#fff
}

#vlist08;li;a
{
text-decoration:none
display:block
background:#ccc
padding:5px;0;5px;5px
}

#vlist08;li;a:hover
{
text-decoration:none
background:#777
color:White
display:block
}

经过一番实验，我发现在链接的样式上增加一段height:100%的代码，就可以解决此问题，修改后的代码如下：