CSS-граница радиуса в Safari 6

Question

CSS-граница радиуса в Safari 6

Я хочу создать коробку с закругленными верхним левым и верхним правым углами. Мой CSS:

border-radius: 4px 4px 0 0;

В Safari 6 border-radius создает некоторые искажения / артефакты. Углы "неровные", и появляются загадочные вертикальные белые линии (прямоугольник bg - синий).

Я пробовал все (-webkit-border-radius, border-top-left-radius, border-top-right-radius, border-style: нет, border-width:0, border-color: прозрачный и т. Д.), Но это, кажется, единственное, что не ломается:

border-radius: 4px;

Это ошибка веб-набора? (У Chrome есть угловые артефакты, но нет других)
Если нет, как я могу округлить только верхний левый и правый углы, не сталкиваясь с этими проблемами?
Я использую MacBook Air 2012 года, OSX Mountain Lion (10.8), Safari 6.0.1, Chrome 22.0.1229.94.

4

css3 safari6

Источник

user1770566 24 окт '12 в 08:47

1 ответ

Другие вопросы по тегам css3 safari6

user1178927 21 ноя '12 в 20:12 2012-11-21 20:12 · Answer 1 · 2012-11-21 20:12

Вот возможный ответ, но вы могли бы иметь дело со многими вещами, поэтому @ndm предлагает отличные предложения для того, чтобы поделиться примером.

Чтобы помочь отладить происходящее, мне нравится увеличивать радиус границы и добавлять цветные фоны.

перелив

У вас может быть просто содержимое внутри коробки, которое переполнено и скрывает угол. Пытаться .box { overflow: hidden; }, Вот JSFiddle, который проверяет три распространенных сценария работы в Safari 6.0.2.

Сглаживание

Если "таинственные белые линии" очень тонкие, это может быть просто сглаживание Safari, которое пытается сделать границу более гладкой. Проверьте эту теорию, сделав границу более толстой и сравнив внешний вид.