В раскрывающемся меню моего веб-сайта верхняя, левая и правая границы элемента имеют серый цвет, а нижняя - белый. Это прекрасно работает в FF3, Chrome, чтобы получить красивое выпадающее меню с непрерывной рамкой.
Но я вижу белую точку на левой стороне от FF4 + и в IE9 +
Думаю, проблема в том, что в FF3 нижнему левому пикселю был присвоен тот же цвет, что и левой границе. Но в FF4 нижний левый пиксель имеет тот же цвет, что и нижняя граница!
Это выглядит ужасно. Как это исправить, чтобы вся левая часть выпадающего меню представляла собой одну непрерывную серую линию?
То, что я делаю здесь, это то, что подменю имеет полную серую рамку. Я хочу убрать серую границу между «Проектами» и самим подменю, чтобы все это выглядело как единое целое с непрерывной границей без делений между ними. Поэтому я сделал белую нижнюю границу «Проекты» и установил ее наложение на подменю на 1 пиксель. Таким образом, часть серой границы подменю исчезает и выглядит непрерывной. Но в FF4 и IE9 нижний левый и нижний правый пиксели соответственно запутывают.
Наведите указатель мыши на меню Projects в 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 непрерывную границу, я хочу, чтобы нижний левый и нижний правый пиксели принимали цвет левой и правой границ соответственно. Есть ли способ сделать это в основных браузерах?
Если нет, глядя на мое раскрывающееся меню, можете ли вы предложить какой-нибудь другой способ обвести эту единую непрерывную границу вокруг всего объекта без белых точек или разрывов где-либо?