В раскрывающемся меню моего веб-сайта верхняя, левая и правая границы элемента установлены на серый цвет, а нижняя граница - на белый. Это отлично работает в FF3, Chrome, чтобы получить красивое раскрывающееся меню с непрерывной рамкой.

Но я вижу белую точку слева от FF4 + и в IE9 +

Я думаю, проблема в FF3 , левому нижнему пикселю был задан тот же цвет, что и левой границе. Но в FF4 левый нижний пиксель имеет тот же цвет, что и нижняя граница!

Это выглядит некрасиво. Как я могу это исправить, чтобы вся левая часть раскрывающегося меню представляла собой одну непрерывную серую линию?

Я делаю здесь, что подменю имеет полностью серую границу. Я хочу удалить серую границу между «Проектами» и самим подменю, чтобы все выглядело как единое целое с непрерывной рамкой без разделений между ними. Итак, я сделал нижнюю границу «Проекты» белой и установил, чтобы она перекрывала подменю на 1 пиксель. Таким образом, часть серой границы подменю исчезает и становится непрерывной. Но в FF4 и IE9 нижний левый и нижний правый пиксели соответственно мешают.

Наведите курсор на меню Projects в http://www.softinternals.com и вы можете увидеть это на левой границе в FF4. вся левая часть раскрывающегося меню представляет собой одну непрерывную серую линию?

Я делаю здесь, что подменю имеет полностью серую границу. Я хочу удалить серую границу между «Проектами» и самим подменю, чтобы все выглядело как единое целое с непрерывной рамкой без разделений между ними. Итак, я сделал нижнюю границу «Проекты» белой и установил, чтобы она перекрывала подменю на 1 пиксель. Таким образом, часть серой границы подменю исчезает и становится непрерывной. Но в FF4 и IE9 нижний левый и нижний правый пиксели соответственно мешают.

Наведите курсор на меню Projects в http://www.softinternals.com и вы можете увидеть это на левой границе в FF4. вся левая часть раскрывающегося меню представляет собой одну непрерывную серую линию?

Я делаю здесь, что подменю имеет полностью серую границу. Я хочу удалить серую границу между «Проектами» и самим подменю, чтобы все выглядело как единое целое с непрерывной рамкой без разделений между ними. Итак, я сделал нижнюю границу «Проекты» белой и установил, чтобы она перекрывала подменю на 1 пиксель. Таким образом, часть серой границы подменю исчезает и становится непрерывной. Но в FF4 и IE9 нижний левый и нижний правый пиксели соответственно мешают.

Наведите курсор на меню Projects в http://www.softinternals.com и вы можете увидеть это на левой границе в FF4. Я хочу удалить серую границу между «Проектами» и самим подменю, чтобы все выглядело как единое целое с непрерывной рамкой без разделений между ними. Итак, я сделал нижнюю границу «Проекты» белой и установил, чтобы она перекрывала подменю на 1 пиксель. Таким образом, часть серой границы подменю исчезает и становится непрерывной. Но в FF4 и IE9 нижний левый и нижний правый пиксели соответственно мешают.

Наведите курсор на меню Projects в http://www.softinternals.com и вы можете увидеть это на левой границе в FF4. Я хочу удалить серую границу между «Проектами» и самим подменю, чтобы все выглядело как единое целое с непрерывной рамкой без разделений между ними. Итак, я сделал нижнюю границу «Проекты» белой и установил, чтобы она перекрывала подменю на 1 пиксель. Таким образом, часть серой границы подменю исчезает и становится непрерывной. Но в FF4 и IE9 нижний левый и нижний правый пиксели соответственно мешают.

Наведите курсор на меню Projects в http://www.softinternals.com и вы можете увидеть это на левой границе в FF4. нижнюю границу белого цвета и установите ее так, чтобы она перекрывала подменю на 1 пиксель. Таким образом, часть серой границы подменю исчезает и становится непрерывной. Но в FF4 и IE9 нижний левый и нижний правый пиксели соответственно мешают.

Наведите курсор на меню Projects в http://www.softinternals.com и вы можете увидеть это на левой границе в FF4. нижнюю границу белого цвета и установите ее так, чтобы она перекрывала подменю на 1 пиксель. Таким образом, часть серой границы подменю исчезает и становится непрерывной. Но в FF4 и IE9 нижний левый и нижний правый пиксели соответственно мешают.

Наведите курсор на меню Projects в http://www.softinternals.com и вы можете увидеть это на левой границе в FF4.

Here are screenshots of the drop-down menu:

Firefox 4:

Internet Explorer 9

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.

Firefox 3

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

• Bottom left and bottom right corner pixels take the color of the left and right borders respectively.
• Both the corners at the top take the color of the top border.
• Bottom border's color isn't taken for any corner.

Firefox 4

This is not what I want :(

• Each corner pixel takes the color of the border that comes before it, going in clockwise direction.

Internet Explorer 8

Also not what I want.

• Similar to FF3, but left doesn't take anything. Right takes all. Top and bottom one corner each.

Chrome 11

Somewhat close to what I want :)

• The color of each corner pixel is the interpolated value of the colors of adjacent borders.

Internet Explorer 9

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.

To make my whole drop-down menu have 1 continuous border, I want the bottom left and bottom right pixels to take the color of the left and right borders respectively. Is there any way I can do this in the major browsers?

If not, looking at my drop-down menu, can you suggest some other way to get that single continuous border around the whole thing without white dots or discontinuations anywhere?