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中的效果如下：

 

转载于:https://www.cnblogs.com/scdsun/archive/2007/03/07/666680.html