Эмуляция радиуса границы CSS3 и тени поля в IE7/8

Ознакомьтесь с этим постом: http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/

Он охватывает специально закругленные углы и тень поля для CSS3 в IE7/8.

Существует плагин jquery, который изменяет DOM для получения скругленных углов. Проверьте это здесь:

http://blue-anvil.com/jquerycurvycorners/test.html

Вот пример страницы, отрисованной для меня в IE, Chrome и FF. Используя Firebug, вы можете увидеть, что плагин представляет группу блоков размером 1px на 1px, которые создают эффект.

Прежде всего, я хотел бы упомянуть, что нет идеального решения для этого до IE9, где будет реализован CSS border-radius.

Вот различные решения, которые у вас есть на тот момент:

Вы можете использовать один из многих сценариев JS, имитирующих закругленные углы. Но ни один из них не реализует тень должным образом. Вот список сценариев, которые я пробовал, и мои выводы. Все эти сценарии имеют что-то общее: они помещают дополнительные элементы в ваш HTML, чтобы создать иллюзию закругленных углов.

• DD Roundies : Этот скрипт очень легкий и работает довольно хорошо. Он работает без какой-либо структуры и хорошо работает с jQuery и Prototype (я предполагаю, что он хорошо работает с другими, но я не могу сказать наверняка). Он использует свойства CSS3 в браузерах, поддерживающих CSS3. И использует тот же хак, что и все остальные для IE. Сглаживание на этом работает очень хорошо. edit Я должен исправить себя здесь. Этот работает с файлом HTC. Он не помещает дополнительные элементы в ваш HTML.

• Curvy Corners и jQuery плагин Curvy Corners : Мне нравится этот. Сглаживание работает очень хорошо. И это хорошо сочетается с фоновыми изображениями. Но это плохо работает с тенями CSS3.Он не проверяет, поддерживает ли ваш браузер CSS3, и всегда использует уродливое решение добавления элементов в ваш дом.

• Nifty Corners & jquery Corner : Оба имеют плохое сглаживание, и углы выглядят очень резкими. jQuery corners не справляется с обработкой фоновых изображений.

Вот почему, на мой взгляд, ни один из них не является подходящим решением:

соблазнительные углы, беспорядочный снимок экрана http://meodai.ch/stackoverflow/curvy.png curvy dom беспорядок

nifty dom mess http://meodai.ch/stackoverflow/nifty.png nifty dom mess

Есть несколько других, но я думаю, что они не упомянуты в этом месте.

Как видите, они добавляют много элементов в ваш дом. Это может вызвать проблемы, если вы хотите добавить закругленные углы к огромному количеству элементов. Это может привести к сбою некоторых старых браузеров / компьютеров. То же самое и с тенями. Существует плагин jQuery, который обрабатывает тени на прямоугольниках и шрифтах: http://dropshadow.webvex.limebits.com/

Мой вывод : если я выполняю небольшую бюджетную работу , У пользователей IE есть только края и нет теней. Если у клиента есть деньги, которые он может потратить, я делаю это только с помощью CSS и делаю изображения для каждого угла. Если они абсолютно должны быть там, но на это нет времени или денег, я предпочитаю использовать один из упомянутых JS-скриптов DD_roundies. Теперь дело за вами.

PS: пользователи IE привыкли к уродливым интерфейсам, они все равно не увидят, что углы и тени отсутствуют: P

Я начал использовать скрипт .htc найдено здесь: Поддержка CSS3 для Internet Explorer 6, 7 и 8

Это простейшая реализация CSS3 для IE6 +, которую я видел.

.box {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari and Chrome */
  border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */

  -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
  box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */

  behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}

для drop-shadow в IE используйте:

.shadow {
  background-color: #fff;
  zoom: 1;
  filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=3);
}

для круглых углов используйте DD_roundies, как указано ниже, только 9Kb - хороший компромисс для круглых углов за секунду! ;-)

конечно для программно IE-специфических возможностей используйте условные комментарии! ;-)

Nifty Corners Cube дает хорошие результаты и, как предполагается, совместим по нисходящей вплоть до IE5.5.

Он только что был выпущен и находится в бета-версии, но проверьте его: http://css3pie.com/