Google Chrome работает с ошибками, используя радиус границы, цвет фона, а также верхнюю и нижнюю границы.Вот свидетельство и код для воспроизведения:
http://jsfiddle.net/6ADtd/4/
<div></div>
div {
background:blue;
border-top:10px solid red;
border-bottom:10px solid red;
border-radius:20px 20px 0 0;
height:100px;
/*
border-right:1px solid transparent;
*/
}
border-right:1px solid transparent; - это трюк, предложенный в комментариях, который помог удалить нежелательную среднюю сплошную полосу, но когда вы измените размер окна / браузера - он появится снова.Это как-то связано с близостью элемента к краю окна браузера, я не совсем понимаю.Вы должны изменить размер, а затем навести курсор на элемент иногда.Видео с моего рабочего стола:
Я попробовал -webkit- префиксы в нескольких свойствах и не смог исправить это.
Я впервые опубликовал это, потому что мне нужно было быстрое исправление для определенного веб-сайта, но теперь я замечаю этопоказать на нескольких сайтах, и я прибил, что это вызывает.Вот что я получаю за то, что не тестирую ничего, кроме Firefox.Вероятно, это ошибка, и я должен сообщить об этом, но я все еще нуждаюсь в исправлении.
Идеальное решение - с помощью CSS, поэтому я могу написать один или два селектора в CSSфайл для исправления вместо того, чтобы копаться в загружаемых файлах шаблонов и в базе данных для применения div-wrap или других исправлений разметки.Кто-нибудь знает какие-нибудь хитрости, чтобы избавиться от этой ошибки?