< 2025年1月 >
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 1
2 3 4 5 6 7 8

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


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

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



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

    <div>
        
<ul id="vlist08">
            
<li><href="http://www.microsoft.com">Microsoft</a></li>
            
<li><href="http://www.ibm.com">IBM</a></li>
            
<li><href="http://www.sun.com">SUN</a></li>
            
<li><href="http://www.google.com">Google</a></li>
            
<li><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中的效果如下:

 
posted on   scdsun  阅读(3507)  评论(1编辑  收藏  举报
编辑推荐:
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
阅读排行:
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· 语音处理 开源项目 EchoSharp
· 《HelloGitHub》第 106 期
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 使用 Dify + LLM 构建精确任务处理应用
点击右上角即可分享
微信分享提示