html – 如何在下拉菜单中修复这个白点边界问题？

概述在我的网站的下拉菜单中，元素的顶部，左侧和右侧边框设置为灰色，底部边框设置为白色。这完美的FF3，Chrome实现了一个美丽的下拉菜单与连续的边框。 但是，从FF4和IE9的左侧看到一个白点 我认为问题是，在FF3中，左下角的像素被赋予与左边框相同的颜色。但在FF4中，左下方的像素的颜色与底边的颜色相同！ 这看起来很丑陋。如何解决这个问题，下拉菜单的整个左侧是一条连续的灰线？ 我在这里做的是，子菜 在我的网站的下拉菜单中，元素的顶部，左侧和右侧边框设置为灰色，底部边框设置为白色。这完美的FF3，Chrome实现了一个美丽的下拉菜单与连续的边框。

但是，从FF4和IE9的左侧看到一个白点

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

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

我在这里做的是，子菜单有一个完整的灰色边框。我想删除“项目”和子菜单本身之间的灰色边框，以便它们都显示为具有连续边框的单一东西，两者之间不分隔。所以我把“项目”底边的白色设置为1px子菜单重叠。因此，子菜单的灰色边框的一部分消失，看起来是连续的。但是在FF4和IE9中，左下角和右下角的像素分别是旋转的。

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

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

firefox 4：

Internet Explorer 9

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

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

firefox 3

这就是我想要的:)它适合我的下拉菜单，左下角的颜色是从左边界取出的。

>左下角和右下角的像素分别取左右边框的颜色。
>顶部的角落都是顶部边框的颜色。
>底部边框的颜色不适用于任何角落。

firefox 4

这不是我想要的:(

>每个角落的像素都是以顺时针方向移动的边框颜色。

Internet Explorer 8

也不是我想要的。

>类似于FF3，但是没有任何东西。权利全部顶部和底部每个角落。

铬11

有点靠近我想要的:)

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

Internet Explorer 9

我在截图时无法访问IE9，但也应该与右下角的像素不同。

您可以看到，每个浏览器对角色的决定是不同的。

要使我的整个下拉菜单有一个连续的边框，我想要左下角和右下角的像素分别取左边和右边的颜色。有什么办法可以在主要浏览器中做到这一点吗？

如果没有，看下我的下拉菜单，你能否提出一些其他的方式，让整个事情的单一连​​续边界没有白点或中断在任何地方？

解决方法 尝试：

>删除底部边框
>设置1px底部填充(或添加1px到现有的底部填充)
>将背景颜色设置为白色

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

总结

以上是内存溢出为你收集整理的html – 如何在下拉菜单中修复这个白点边界问题？全部内容，希望文章能够帮你解决html – 如何在下拉菜单中修复这个白点边界问题？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。