如何解决css\'tab\'修复>选项卡的底部边框
| @ http://jsfiddle.net/ktCb8/3/可以看到示例。 将鼠标悬停在一个\'tab \'上时,我需要怎么做才能使\'tab \'的底部边框变为白色(以便将完成悬停的选项卡连接到面板波纹管并且没有灰线)。 n 最新> http://jsfiddle.net/ktCb8/27/仍然无法使其正常工作:( :(解决方法
只是修改:
#contentBox > li:hover,#contentBox ul
{
border: 1px solid #CCC;
background-color: #FFF;
}
至:
#contentBox > li:hover,#contentBox ul
{
border: 1px solid #CCC;
border-bottom: 2px solid #fff;
background-color: #FFF;
}
更新了JS Fiddle。
针对评论中的问题进行了编辑:
那不会在#contentbox ul的底部放一个灰色边框吗?
它确实确实也删除了ѭ2的底部边框,以更正我删除了上面的更改,并只需追加以下新声明即可:
#contentBox > li:hover {
border-bottom: 2px solid #fff;
}
就像这个JS Fiddle演示中一样。
, 降低出现的内容元素的z-index
,并将其margin-top
设置为少1个像素。
http://jsfiddle.net/niklasvh/ktCb8/23/
#contentBox > li:hover ul
{
position:absolute;
z-index:-99;
margin-top:5px;
display: block;
}
编辑:或对大卫的示例进行微小的更改:
#contentBox > li:hover,#contentBox ul
{
border: 1px solid #CCC;
border-bottom-width: 2px;
background-color: #FFF;
}
http://jsfiddle.net/niklasvh/ktCb8/25/
, 由于您的第一个示例在OS X上的Firefox,Chrome和Safari上运行良好,并且您在Windows上的Chrome和资源管理器上看到间距问题,因此,这显然与基本浏览器样式存在差异。
首先,使用Reset CSS使各个浏览器之间的间距一致。然后调整内容框的上边界,直到边框对齐。确保像在第一个示例中那样在内容框中使用ѭ8not,而不是在第二个示例中使用正值。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。