css'tab'修复＆gt;标签的底部边框

Question

@ http://jsfiddle.net/ktCb8/3/你可以看到这个例子。

当将鼠标悬停在一个“标签”上时，我需要做些什么才能使“标签”上的底部边框变为白色（以便完成悬停的标签连接到下面的面板并且没有灰线）。

日Thnx

最新＆gt; http://jsfiddle.net/ktCb8/27/仍无法让它发挥作用:( :(

Answer 1

修改：

#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;
}

Updated JS Fiddle

<小时/> 已编辑以回复评论中的问题：

  

虽然不会在#contentbox ul底部放置灰色边框？

它确实删除了ul的底部边框，以纠正我将删除上述更改，并简单地附加此新声明：

#contentBox > li:hover {
    border-bottom: 2px solid #fff;
}

与此JS Fiddle demo一样。

Answer 2

降低显示的内容元素的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;


}

编辑：或者对David的样本稍作修改：

#contentBox > li:hover, #contentBox ul
{
    border: 1px solid #CCC;
    border-bottom-width: 2px;
    background-color: #FFF;
}

http://jsfiddle.net/niklasvh/ktCb8/25/

Answer 3

由于您的第一个示例在OS X上的Firefox，Chrome和Safari中运行良好，并且您在Windows上看到Chrome和Explorer上的间距问题，这显然是基本浏览器样式的差异。

首先，使用Reset CSS使浏览器的间距保持一致。然后调整内容框的上边距，直到边框对齐。请务必在内容框中使用z-index: -1，如第一个示例中所示，而不是第二个示例中的正值。