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

考虑这样一种 CSS 控制 li 的显示效果，如下图所示：
<div>
<ul id="vlist08">
<li><a href="http://www.microsoft.com">Microsoft</a></li>
<li><a href="http://www.ibm.com">IBM</a></li>
<li><a href="http://www.sun.com">SUN</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%的代码，就可以解决此问题，修改后的代码如下：

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

修改后在IE6中的效果如下：