Проблема с радиусом границы CSS3 в Chrome, Opera, Safari

Question

Я столкнулся с этой проблемой, пытаясь добавить закругленные углы к некоторым элементам div, и, похоже, не могу найти решение.Я использую этот CSS для класса, назначенного для div:

-moz-box-shadow: 0px 5px 5px #cccccc;
-webkit-box-shadow: 0px 5px 5px #cccccc;
box-shadow: 0px 5px 5px #cccccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;

Ниже показано, как он отображается в Chrome, Safari и Opera:

А вот как это отображается в Firefox и IE9:

Выглядит так, как будто фон в Chrome и других приложениях каким-то образом перекрывает цвет фона в верхней границе.,Единственный CSS, связанный с цветной верхней границей:

border-top:8px solid #333333;

Есть идеи?

Answer 1

Это, я подозреваю, проблема с тем, как браузеры выбирают рендеринг блоков с частичными границами, а также border-radius.Я не думаю, что это что-то, что вы можете исправить самостоятельно (попробуйте установить белые границы для других сторон? Хотя я не знаю, сработает ли это) без какого-либо совершенно другого метода.

Там является своего рода стандартом, составляемым в спецификации (в частности, §5.4 Цветовые и стилевые переходы ) относительно того, как именно должны отображаться границы блока с радиусами углов,если вы склонны взглянуть на это.Но, в конце концов, именно браузер будет рисовать границы и закругленные углы, и согласованное поведение на разных платформах будет трудно достичь без сотрудничества.

Answer 2

Проверьте эту скрипку в различных браузерах:

http://jsfiddle.net/QVS9X/

При удалении border-radius все возвращается на круги своя. Возможно, вы обнаружили ошибку в реализациях Webkit и Opera border-radius. Проверьте, не сообщалось ли об этом, и если нет, вы можете сообщить об этом:).

[EDIT] * * +1010

Я совершенно уверен, что это ошибка.

1. Это проявляется только в Chrome & Opera
2. Ошибка выглядит по-разному в Chrome и Opera
3. Глючная часть связана только с шириной границы, которая превышает значение border-radius (то есть, для border-radius: 10px и ширины границы 10px, все в порядке)
4. Правильно отрисованная деталь имеет ширину, равную значению border-radius.

Я уверен, что об этом следует сообщать и командам Opera, и Webkit.