Safari в OS X - странная ошибка с граничным радиусом

У меня возникают некоторые действительно странные проблемы с радиусом границы в Safari для Mac OS X. Взгляните на этот jsFiddle: http://jsfiddle.net/sXxtU/1/

Safari Mac OS X:

(Верхний левый угол и вертикальная вертикальная линия)

Chrome Mac OS X:

(Отлично отлично)

Safari iOS 6.0

(Также отлично отлично).

Теперь в этом примере я использую border-radius: 5px 5px 0 0;, т.е. применяя его только в верхних углах. Однако, если я решил обойти все углы - я получаю это (в Safari для OS X):

Это известная ошибка? Есть ли способ исправить это? Я предполагаю, что это связано с некоторыми проблемами отсечения, но независимо от того, как я пытаюсь применить различные исправления, я не могу заставить его выглядеть совершенно правильно.

Edit
Я должен отметить, что это в Safari 6.0.2. пока еще нет возможности тестировать другие версии.

Изменить 2
Попробовал добавить border: 1px solid transparent;, и он выглядит намного лучше. Однако, если я иду с цветом границы (например, #fff), у меня все еще возникают проблемы с отсечением (теперь в верхнем правом углу...?). Все еще очень интересно узнать, что происходит здесь.

Изменить 3
Пользователь Sparky отметил, что мой HTML недопустим (имеет элемент div внутри ul-элемента), однако я подтвердил, что это не имеет ничего общего с проблемами, которые у меня возникают.

Изменить 4
Пробовал Safari 6.0.2 в некоторых старых версиях OS X, и эта проблема, похоже, встречается в 10.8.2. Очень странно.

Ответ 1

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

Я тестировал это в 6.0, а затем в 6.0.2

Вот вилка вашего jsfiddle с несколькими настройками.

http://jsfiddle.net/rossedman425/VTySS/1/

HTML:

<div class="container">
<div class="pill">
    <ul class="cf">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 1</a></li>
    </ul>
</div>

CSS

.container {
    padding: 20px;
}
.pill {
    background-color: #00a38f;
    border-radius: 5px 5px 0 0;
}
ul {
    padding: 13px;
    list-style: none;
}
li {
    float:left;
    margin-right: 20px;
    display: inline-block;
}

.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

Ответ 2

Возможно, эта версия OS X отображает UL с каким-то свойством фона. Его просто выстрел в темноте, но, возможно, попробуйте background: transparent; на UL. Или, если это будет служить той же цели, попробуйте переместить цвет фона и радиус границы в UL.

Ответ 3

Это действительно так и не имеет никакого отношения к тому, как написан код, это ошибка браузера.

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

Все еще не удалось устранить это.

Ответ 4

Я не могу воспроизвести вашу проблему в моей версии Safari.

Однако я заметил, что у вас есть недопустимый HTML. В соответствии с спецификацией W3C и онлайн-инструмент проверки HTML, <ul> должны содержать только элементы <li> как непосредственные потомки.

Недопустимый код HTML:

<ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 1</a></li>
    <div class="clear"></div> <!-- this line is invalid HTML -->
</ul>

Удалите <div class="clear"></div> из <ul> и посмотрим, очистит ли он это...

<ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 1</a></li>
</ul>

Вы можете использовать overflow: в <ul>, чтобы заставить его развернуть, чтобы содержать его дочерние элементы, и это полностью исключает необходимость очистки div.

ul {
    overflow: auto;
}

http://jsfiddle.net/sXxtU/7/

Ответ 5

У меня была аналогичная проблема, на FF20, но, похоже, я только случайно зацепил ее на странице. Сброс увеличения до 0 удаляет линию.

Ответ 6

Возможно, использование четных чисел вместо нечетных чисел будет работать: Safari 6.0.5 на ML

В моем случае я протестировал следующее:

border-radius: 4px; /* HAPPY */
border-radius: 5px; /* SAD */
border-radius: 6px; /* HAPPY */

Это ошибка браузера.

Ответ 7

Попробуйте выполнить следующие настройки радиуса границы:

border-top-right-radius:10px;
-webkit-top-right-border-radius:10px;
border-top-left-radius:10px;
-webkit-top-left-border-radius:10px;