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

Question

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

但是，我在FF4 +和IE9 +

的左侧看到一个白点

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

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

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

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

以下是下拉菜单的屏幕截图：

Firefox 4：

Internet Explorer 9

---

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

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

Firefox 3

这就是我想要的:)它适合我的下拉菜单，因为左下方的颜色是从左边框拍摄的。

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

Firefox 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;
    ...
}