考虑这样一种 CSS 控制 li 的显示效果,如下图所示:
我的本意是通过 CSS 控制 li a:hover 的样式,在鼠标停留到具体的链接时,将该链接行的背景色设置为灰色,同时字体的颜色设置为白色。
但是在IE6中测试发现,只有当鼠标移到链接的文字上时,才能有hover的效果(如上图所示,当鼠标指针超出了链接文字的范围,不能出现hover的效果)。
而同样的代码内容,在Firefox浏览器中确可以正常的运行。下图展示了在Firefox中的使用效果。
以下是上面实例内容的html和css代码:
经过一番实验,我发现在链接的样式上增加一段height:100%的代码,就可以解决此问题,修改后的代码如下:
修改后在IE6中的效果如下:
我的本意是通过 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>
<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;
}
{
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;
}
{
text-decoration:none;
height:100%;
display:block;
background:#ccc;
padding:5px 0 5px 5px;
}
修改后在IE6中的效果如下:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 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 构建精确任务处理应用