Question

我已经使用JQuery创建了一个下拉菜单，但是当我在Chrome中测试它时，除了应该添加的边框之外，第三级和更低级菜单显示一条粗白线（在列表项的中心）。这在其他浏览器中不会发生。它仅在我将border-top参数应用于列表项时发生。这必须是与chrome中的CSS相关的一些bug，因为我无法看到它可能做错了什么。我用Google搜索了这个问题，并没有找到任何有同样问题的人。

看看：

JSfiddle

Full screen

Answer 1

似乎在

之间发生了某种“碰撞”

.nav ul ul li:first-child{
    border-top:solid 1px white;

和

.nav ul li{
    border-bottom:solid 1px #fff;

我提出了一些solution：

/* THIRD +  LEVEL LISTS */
.nav ul ul li{
    border:none;
    border:1px solid #FFF;
    border-left:none;
}

将此添加到第三层的顶部。

这似乎是Chrome中的一个错误，但我搜索了铬并没有找到与此相关的任何内容。你应该report。

Answer 2

我在chrome devtools中检查了你的全屏示例，我找到了以下行：

.nav ul li {
  background: #777;
  border-bottom: solid 1px white; <---- I think this is your problem
}

当我评论出边框底部时，它对我来说很好看，并且没有巨大的白线。

Answer 3

.nav ul ul li:first-child {
   border-top:solid 1px white; <-- that line causes your problem I think.
   border-top-right-radius: 8px;
   border-top-left-radius: 8px;
}

CSS - 边框在Chrome中添加第二条粗白线

3 个答案: