В предыдущей статье про округление углов я не учел поддержу Internet explorer’a, сейчас я расскажу как округлить углы без всяких дополнительных контейнеров и картинок а только при помощи css и htc скрипта присоединенному к стилям.
И так поехали, для начала скачаем htc файл из базы исходников гугла http://curved-corner.googlecode.com/files/border-radius.htc, кидаем его в папку со стилями далее в стилях прописываем такой код
1 2 3 4 5 6 7 8 9 | .ieroundbox{ -moz-border-radius: 15px; //округление углов для mozilla -webkit-border-radius: 15px; //округление углов для chrome safari border-radius: 15px; //для всех браузеров с поддержкой css3 behavior: url(border-radius.htc); // подключаем наш htc скрипт который и будет округлять углы в ie width:200px; height:200px; background:#000; } |
в html прописываем такой код
1 2 3 | <div class="ieroundbox"> Круглые углы в ie </div> |
вот и все
можете посмотреть пример
можете скачать архив
Данный метод Поддерживается в ie6,ie7,ie8.
Загрузка ...
А если на странице в фоне будет картинка? Будет ли этот скрипт работать в IE?
да, обновил пример)
Реально круто
Раньше использовал jQuery плагин чтобы скруглить в ie6, но это явно удобней.
Вопросик напоследок, оно адекватно отобразит если у родительского блока будет не белый цвет или какое-то изображение?
да , конечно. Единственный минус который я пока обнаружил это в ie иногда блоку применяется Z-index с орицательным значением, то есть блок заезжает под врапер(( а сам контент внутри блока останется наверху
Вылезла проблема – если в ИЕ округлять углы при помощи вот такого решения http://csska.ru/okruglenie-uglov-dlya-ie6/, то получается что свойство repeat для фонового изображения не срабатывает. Например, если я беру фоновое изображение высотой 800px (изображение с градиентом) и высота дива не превышает 800, то все нормально …
если высота больше дива больше высоты изображения, то оно начинает повторяться …
Как можно с этим побороться ?
Вылезла проблема – если в ИЕ округлять углы, то получается что свойство repeat для фонового изображения не срабатывает. Например, если я беру фоновое изображение высотой 800px (изображение с градиентом) и высота дива не превышает 800, то все нормально …
если высота больше дива больше высоты изображения, то оно начинает повторяться …
Как можно с этим побороться ?
сейчас проверил в ie6 & ie7 да действительно нельзя убрать повторение, либо выбрать повторение только по Х или по У(( наверное чтобы убрать этот баг нужно ковыряться в htc скрипте((если получится исправить я выложу
….. htc, картинками округлять надо и не мучатся
у каждого свои методы, я не сказал что это лучший, но очень удобный метод.
на подходе css3 и сейчас только ИЕ его не поддерживает … а данное решение считаю очень удачным … да и потом, когда все на css3 переводить, то нет необходимости картинки убирать
правильно!! но под ie7 и 8 по любому придется че нибудь делать с углами, доля ie6 сокращается и скоро надеюсь его все забудут))
да боюсь что ие6 будет жить еще долго … учитывая что не все компании сейчас имеют финансовые возможности и желание апгрейдить используемые ОС … хотя и ие8 вроде как обновление к ХР приходит … хотя может все и от типа лицензии зависит … но я не знаком в этой теме …
))
так что доработка скрипта будет очень актуальной
плюс еще один баг выловил … но о нем завтра напишу подробнее
Алексей скрипт разрабатывал не я, ты напиши о баге может я смогу его как то исправить)
не работает в ie 6 не скругляет углы!
специально скачал портэйбл ie6 и проверил!
не пашет!
и под старую мозилу и оперу не пашет!
так что придётся верстать по старинке!
Несомнено это сейчас актуальная тема и автор попал в точку. Молодец!
Тема старая конечно же, но прочитал с удовольствием
Огромное человеческое спасбо!
Офигенный сайт. Больше таких делайте
Прикольная статья.. Щас добавлю ваш сайт в закладки
Огроменннейшее спасибо администратору ресурса! Теперь на моем сайте прибавилось посетителей благодаря более приятному интерфейсу.
не скругляет углы в ие8. Никак.
Я просто забил и оставил вся угловатое)
Покумекал и решил проблему с повторением изображения в блоке, если его размеры больше самого изображения. Вот мой вариант (может кому и поможет)
1)В css файле, где прописали свойство background, в конце добавляем !important
(пример:
было background:url(‘images/banner3.png’) no-repeat;
стало background:url(‘images/banner3.png’) no-repeat !Important;);
2)Внутри файла border-radius.htc находим такую строку
css.addRule(“v\\:fill”, “behavior: url(#default#VML)”);
и комментируем её (т.е. она не должна выполняться).
Вот и всё
P.S. Конечно есть ещё варианты, но это первое, что пришло мне вголову, так как нужно было это срочно решить.
у меня не округляет совсем ничего не div не img, движок socengine возможно конфликты какие то.
используется в заголовке
и именно если не IE=8, вообще не проходить авторизация на сайте.
а как округлить только два верхних угла???? Если использовать этот скрипт тоработать не будит(((
Пример не работает в браузере “Opera” в версии
9.00. Как это исправить?