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

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添加到现有底部填充)
• 将背景颜色设置为白色

这应该将左边框和右边框扩展到元素的底部,而白色背景颜色应该覆盖子菜单顶部边框.