如何在下拉菜单中解决此白点边框问题？

Question

在我网站的下拉菜单中，一个元素的上下边框设置为灰色，底部边框设置为白色。这在 FF3 中完美运行，Chrome 实现了带有连续边框的漂亮下拉菜单。

但是，我在 FF4+ 和 IE9+ 中看到左侧有一个白点

我认为问题在于，在 FF3 中，左下角的像素被赋予了与左边框相同的颜色。但是在FF4中，左下角的像素被赋予了与底部边框相同的颜色！

这看起来很难看。我该如何解决这个问题，使下拉菜单的整个左侧都是一条连续的灰线？

我在这里做的是，子菜单有一个完整的灰色边框。我想删除“项目”和子菜单本身之间的灰色边框，以便它全部显示为一个具有连续边框的单一事物，两者之间没有分隔。所以我将“项目”底部边框设为白色，并将其设置为与子菜单重叠 1px。因此，子菜单的灰色边框的一部分消失了，它看起来是连续的。但在 FF4 和 IE9 中，左下角和右下角的像素分别搞砸了。

将鼠标悬停在http://www.softinternals.com 中的Projects 菜单上，您可以在FF4 的左侧边框上看到它。

下拉菜单截图如下：

火狐4：

Internet Explorer 9

---

我做了更多的研究，发现了这个：

当应用单像素粗边框时，每个浏览器和同一浏览器的每个版本似乎对角像素选择什么颜色有不同的想法。

火狐3

这就是我想要的 :) 它非常适合我的下拉菜单，因为左下角的颜色取自左边框。

• 左下角和右下角像素分别采用左右边框的颜色。
• 顶部的两个角都采用顶部边框的颜色。
• 底边框的颜色不会用于任何角。

火狐4

这不是我想要的:(

• 每个角像素都采用它之前的边框颜色，顺时针方向。

Internet Explorer 8

也不是我想要的。

• 类似于FF3，但左不带任何东西。权利通吃。上下各一个角。

Chrome 11

有点接近我想要的:)

• 每个角像素的颜色是相邻边框颜色的插值。

Internet Explorer 9

我在截屏时无法访问 IE9，但它也应该对右下角的像素做不同的事情。


如您所见，每个浏览器对角颜色的决定是不同的。

为了使我的整个下拉菜单有 1 个连续边框，我希望左下角和右下角像素分别采用左右边框的颜色。有什么方法可以在主流浏览器中做到这一点？

如果没有，请查看我的下拉菜单，您能否建议一些其他方法来让整个事物周围的单个连续边框没有白点或任何地方的中断？

Answer 1

试试：

• 移除底部边框
• 设置 1px 底部填充（或在现有底部填充中添加 1px）
• 将背景颜色设置为白色

这应该将左右边框延伸到元素的底部，而白色背景颜色应该覆盖子菜单的顶部边框。

Answer 2

我发现这个问题是因为border-bottom 设置为#FFF in:

.hover-menu
{
    ...
    border-bottom: solid 1px #FFF !important;
    ...
}

我决定改成：

.hover-menu
{
    ...
    border-bottom: solid 0 #FFF !important;
    ...
}

或

.hover-menu
{
    ...
    border-bottom: none !important;
    ...
}