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，而不是在第二个示例中使用正值。