ошибка border-radius в Opera
некоторое время назад я сделал небольшую страницу для себя, и я наткнулся на ошибку, что до сих пор не могут ответить.
при открытии http://darngoodpictures.com/#showme вы видите стрелки навигации слева и справа. Они полностью сделаны CSS. В наши дни я бы пошел другим путем, но это сделано, и я придерживаюсь этого:)
в каждом браузере, который я тестировал, стрелки выглядели так, как должны. Единственное исключение-Opera. Опера отрисовывает стрелы, каких я никогда раньше не видел. Кто-нибудь может объяснить, что там происходит? Я довольно быстро понял, что у Opera есть некоторые проблемы со свойством границы-радиуса-стрелок, но может ли кто-нибудь дать более точную информацию? Это поведение так странно...
изменить: Это становится все более и более странным. Первоначально я думал, что мой CSS в сочетании с border-radius каким-то образом вызвал проблему, но проблема в border-radius. Он усиливается, когда ширина границы combinated с ней. См. следующие jsfiddles:
Я: http://jsfiddle.net/62ujn/ (все отображается как и следовало ожидать)
основные правила:
border-radius: 0;
border-width: 200px;
II:http://jsfiddle.net/62ujn/1/ (первые незначительные проблемы в Opera)
основные правила:
border-radius: 50px;
border-width: 200px;
III:http://jsfiddle.net/62ujn/2/ (отсюда рендеринг в Opera просто становится смешным)
правила:border-radius: 50px;
border-width: 200px 150px;
IV:http://jsfiddle.net/62ujn/3/
основные правила:
border-radius: 50px;
border-width: 200px 150px 100px;
V:http://jsfiddle.net/62ujn/4/
основные правила:
border-radius: 50px;
border-width: 200px 150px 100px 50px;
странно. Очень. Странный.
EDIT 2:
Я только что связался с Opera об этом, так как подозреваю, что нет другого ответа, кроме "Opera-Bug"... Я буду обновлять эту страницу, когда получу ответ, который удовлетворяет :)
4 ответов
.round {
-o-border-radius topleft: 30px; **//for Opera and Iphone5 Mobile**
-o-border-radius topright: 30px;
-o-border-radius bottomleft: 30px;
-o-border-radius bottomright: 30px;
}
Как насчет tring, чтобы дать вашему радиусу границы div для поведения кроссбраузера
.arrow {
border-radius: 30px;
-o-border-radius: 30px; //for Opera
-webkit-border-radius: 30px; // for Chrome, Safari
-moz-border-radius: 30px; // for Mozilla
border-style: solid;
cursor: pointer;
height: 0;
margin: 0 0 -15px 50px;
width: 0;
}
это действительно очень забавные артефакты;) вы используете css-трюк с 0 измерениями и границей, заполняющей все пространство. Только это вызывает проблемы в сочетании с радиусом границы. Border-radius сам по себе отлично работает в opera в большинстве сценариев, даже с очень толстой границей Скрипка-Пример а также в случаях с 0-границей и одним цветом. Но я знаю, что мы все любим эти маленькие грязные трюки, а опера-забавная пробка.
Так, вот АЛЬТЕРНАТИВНАЯ ВЕРСИЯ ВАШИХ НАВИГАЦИОННЫХ СТРЕЛОК это работает лучше с opera, но это также не идеально. Опера действительно отстой ;/
HTML-код:
<div>
<div class='first'></div>
<div class='second'></div>
</div>
<div class='mirror'>
<div class='first'></div>
<div class='second'></div>
</div>
CSS:
div {
width:200px; height:100px;
background:none;
position:relative;
margin-bottom:5px;
}
.first {
position:absolute;
left:0; top:0;
width:60px; height:100px;
background:black;
border-radius:40px 0 0 40px;
transform:scale(0.5, 1);
-webkit-transform:scale(0.5, 1);
-o-transform:scale(0.5, 1);
}
.second {
position:absolute;
left:57px; top:0;
width:0; height:0;
background:none;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid green;
transform:scale(1.5, 1);
-webkit-transform:scale(1.5, 1);
-o-transform:scale(1.5, 1);
}
.mirror {
transform:scaleX(-1);
-webkit-transform:scaleX(-1);
-o-transform:scaleX(-1);
}
хорошей новостью является то, что opera прекратит разработку собственного движка рендеринга и начнет использовать webkit. Таким образом, ваша проблема со стрелкой будет решена автоматически с помощью одной из опер будущих обновлений ^^
хорошо, просто чтобы официально закончить этот вопрос: некоторое время назад Opera выпустила версию, в которой больше нет этих проблем. Итак, очевидно, это была ошибка в Opera, и они ее исправили. Вопрос закрыт:)