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

考虑这样一种 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.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中的效果如下：