На данный момент свойство CSS3 border-radius не поддерживается в полной мере браузерами IE 6,7,8 и Opera 9.64
(upd. В IE9 есть поддержка border-radius)
В файле стилей пишем следующее:
.sample{
-moz-border-radius: 15px; /*для Firefox */
-webkit-border-radius: 15px; /* Safari и Chrome */
border-radius: 15px; /* Opera 10.5+, а также версии других браузеров в будущем */
behavior: url(ie-css3.htc); /* Поддержка IE 6,7,8. */
}
-moz-border-radius: 15px; /*для Firefox */
-webkit-border-radius: 15px; /* Safari и Chrome */
border-radius: 15px; /* Opera 10.5+, а также версии других браузеров в будущем */
behavior: url(ie-css3.htc); /* Поддержка IE 6,7,8. */
}
Примечание №1
VML-скрипт ie-css3.htc берем с http://fetchak.com/ie-css3/
Примечание №2
Opera 9.64 отображает скругленные углы через SVG, поэтому
для поддержки border-radius в Opera 9.64 стоит использовать генератор скругленных углов.
Пример кроссбраузерного варианта border-radius с учетом всех браузеров:
.box{
position:relative; z-index:1; /*IE*/
background-color: #AAA;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background: #AAA url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IGZpbGw9IiNGRkYiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz48cmVjdCBmaWxsPSIjQUFBIiByeD0iMTUiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz48L3N2Zz4=);
behavior: url(ie-css3.htc);
}
position:relative; z-index:1; /*IE*/
background-color: #AAA;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background: #AAA url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IGZpbGw9IiNGRkYiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz48cmVjdCBmaWxsPSIjQUFBIiByeD0iMTUiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz48L3N2Zz4=);
behavior: url(ie-css3.htc);
}
<div class="box"></div>
у меня не получается сделать!в интренет эксплорере всё равно такая же фигня
Причин может быть несколько:
Неправильный путь до .htc файла в CSS
Если установлен Multiple IE, возможны проблемы с отображением на локальной машине (при публикации на сервере подобных проблем не замечал)
Спасибо!!! Все работает. Правда в опере не проверял. Нет ее у меня
http://ru.opera.com/download/
У меня гребаный IE 9 нихрена не поддерживает border-radius. Еще раз убеждаюсь в тупости разработчиков этого говняного браузера.
Валерий что-то вы не так сделали, у меня в IE9 все работает!
для IE 9 надо доктайп указать html5
и тогда все будет отлично
Данный скрипт работает, но к сожалению какой то глюк имеет!
Если у блока к которому применен border-radius поставить фоновое изображение типа спрайт и указать background-position, то позиция фона не меняеться!! Позиция фона остаеться на координатах 0 0 :( — жаль, очень жаль.
css3 существует для того, чтобы облегчать задачу оформления страницы. Когда он не поддерживался вовсе, такая задача выполнялась путем одной картинки png. например 2000*2000px и показом разных скругленных углов в области блока. лично я и сейчас продолжаю пользоваться старыми дедовскими способами. сейчас — это лучший вариант. только лет через несколько мы сможем перейти на полную поддержку css3
Агромное спасибо! Теперь буду обходиться без всякой дрянной нарезки углов!