8

Круглые углы в Internet Explorer

Перечитал тучу информации по верстке скруглённых углов. Все предлагают какие-то исполинские обёртки из div’ов или еще хуже с использованием изображений. Всё это мне не подходит, слишком сложно. Один раз добавить еще можно, но потом, спустя продолжительное время (когда подзабыл уже что к чему), редактировать такой код — сущее испытание.
В FireFox и Chrome есть специальные CSS правила, решающие данную проблему:

.round { -moz-border-radius:12px; -webkit-border-radius:12px; }

Но в IE невозможно сделать круглые углы без изображений и прочих извращений хаков. Вот для чего нужен CurvyCorners. CurvyCorners определяет  “-webkit-border-radius” и “-moz-border-radius” правила для DOM элементов и сам вставляет обёртку для этого элемента, чтобы сымитировать круглые углы. Для меня важно ещё, что не используется никаких изображений. Таким образом использование круглых углов в IE становится таким же простым как и в FF, вот пример. В Opera этот скрипт тоже работает. Важно, так же, что поддержка такого кода существенно упрощается.

В общем, если нужно легко и быстро сделать блоки со скруглёнными углами — лучше CurvyCorners я не знаю.

UPD: Со временем, благодаря коментаторам, выяснилось гораздо более красивое и качественное решение — jquery.corner.js. Более качественная реализация, работает быстрее и, что гораздо важнее, не заброшена автором. Я в своём коде теперь использую её.

jquery.corner.jsjj

8 Comments

  1. единственный баг был мною замечен на IE8 — когда в блоке фоновая картинка, то углы закругляются, но картинка пропадает) временно решил заменой строчки в скрипте — el.runtimeStyle.backgroundImage = ‘none’ на el.runtimeStyle.backgroundImage = elStyle.backgroundImage и убрал закругленность верхних углов) тоже не все гладко, но из всех вариантов, типа кучи пустых div’ов и рисованных уголков, этот самый разумный и пользователи IE6, 7 и 8 видят закругленные углы 🙂

  2. Хорошая штука, но вот закругленный таким образом не расширяется динамически надлежащим образом, если вдруг случится такая необходимость. По-моему, лучше плагин для IE jquery.corner.js . А еще лучше не пользоваться IE всех версий и советовать также другим не использовать его. Благо, пользователи линукса от него избавлены.

  3. Согласен с мнением про IE.

    И с тем, что jquery.corner.js по-лучше будет.

    Спасибо!

  4. Пробовал CurvyCorners — в IE8 ни в какую не хотел работать, упорно сообщал о брошеном, но не пойманом чем-то там))) Поставил jquery.corner.js — и о чудо, все сразу заработало! Класс, взял себе в копилку!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *