如何修复这个白点边界问题在下拉菜单？ [英] How to fix this white-dot border issue in a drop down menu?

问题描述

在我的网站的下拉菜单中，元素的顶部，左侧和右侧边框设置为灰色，底部边框设置为白色。这在FF3中完美地工作，Chrome实现了一个带有连续边框的漂亮的下拉菜单。

In my website's drop down menu, an element's top, left and right borders are set to gray and bottom border is set to white. This works perfectly in FF3, Chrome to achieve a beautiful drop down menu with a continuous border.

但是，我看到一个白色的点在左侧从FF4 + IE9 +

But, I see a white dot on the left hand side from FF4+ and in IE9+

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

I think the issue is, in FF3, the bottom left pixel was given the same color as the left border. But in FF4, the bottom left pixel is given the same color as the bottom border!

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

This is looking ugly. How can I fix this so that, the entire left side of the drop down menu is one continuous gray line?

我在这里做的是，子菜单一个完整的灰色边框。我想删除项目和子菜单本身之间的灰色边框，使它都显示为一个单一的东西，连续的边界，之间没有分裂。所以我使项目底部边框白色，并将其设置为与子菜单重叠1px。因此，子菜单的灰色边框的一部分消失，并且它看起来是连续的。

What I am doing here is, the sub-menu has a full gray border. I want to remove the gray border between the "Projects" and the sub-menu itself so that it all appears as a single thing with continuous border with no divisions in between. So I made the "Projects" bottom border white and set it to overlap the sub-menu by 1px. So, part of the gray border of the sub-menu disappears and it appears continuous. But in FF4 and IE9, the bottom left and bottom right pixels respectively are screwing things up.

将鼠标悬停在项目菜单上，然后在FF4和IE9中分别左下角和右下角的像素=http://www.softinternals.com =nofollow noreferrer> http://www.softinternals.com ，您可以在FF4的左侧边框看到这个。

Hover over the Projects menu in http://www.softinternals.com and you can see this on the left side border in FF4.

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

I did more research and found this:

当应用单像素厚边框时，每个浏览器和每个版本的浏览器似乎有一个不同的想法

When applying a single pixel thick border, each browser and each version of the same browser seem to have a different idea about what color to choose for the corner pixels.

这是我想要的:)它适合我

This is what I want :) It suits my drop down menu well as the bottom left color is taken from the left border.

• 左下角和右下角的像素采用左下角的颜色


• 底部边框的颜色不采用。


• 任何角落。

这不是我想要的：（

• 每个角落像素采用它之前的边框的颜色

也不是我想要的。

• 类似于FF3， 。权利取决于所有。

稍微接近我想要的）

• 每个角落像素的颜色是内插值

我没有访问IE9的截图，但它也应该做不同的东西不同的右下角像素。






正如您所看到的，每个浏览器关于角色的决定都是不同的。

I Didn't have access to IE9 when taking screenshots, but it also should be doing things differently with the bottom right pixel.


As you can see, each browser's decision regarding corner colors is different.

为了使我的整个下拉菜单有1个连续的边框，我想让左下角和右下角的像素分别取左边界和右边界的颜色。

如果没有，看看我的下拉菜单，你能建议一些

推荐答案

Try：

• 移除底部边框


• 设置1px底部填充（或向现有底部填充）


• 将背景颜色设置为白色

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

This should extend the left and right borders to the bottom of the element, while the white background color should cover the sub-menu top border.

这篇关于如何修复这个白点边界问题在下拉菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！