Эмуляция CSS3 border-radius и box-shadow в IE7 / 8 - PullRequest
48 голосов
/ 22 апреля 2010

Я работаю над HTML для небольшого веб-приложения; дизайн требует области содержимого с закругленными углами и тени. Я смог сделать это с помощью CSS3, и он работает безупречно на Firefox и Chrome:

CSS3 Version

Однако Internet Explorer 7 и 8 (не поддерживающий CSS3) - это отдельная история:

Internet Explorer Version

Существует ли простое и легкое решение JavaScript, которое позволило бы мне либо 1) использовать специфичные для IE функции для достижения этой цели, либо 2) модифицировать DOM (программно) таким образом, чтобы добавлять собственные изображения вокруг области содержимого эмулировать эффект?

Ответы [ 10 ]

30 голосов
/ 28 апреля 2010

Проверьте это сообщение: http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/

В IE7 / 8 он охватывает конкретно закругленные углы и тени для CSS3

27 голосов
/ 01 мая 2010

Это мой метод, я использую условные выражения для нацеливания файлов CSS на браузеры IE.

Скажем, у вас есть div с идентификатором #page_container. В вашем обычном файле master.css или css3.css вы должны указать ширину, высоту, закругленные углы и тени с помощью стилей.

Теперь, когда IE попадет на вашу страницу, он получит условие css, которое вы установили. Для того же самого div # page_container вы можете немного изменить ширину, высоту, возможно, отступы, а затем дать ему фоновое изображение, чтобы оно выглядело как падающая тень, версия с закругленным углом.

Итак, ваша голова будет иметь это:

<head>
<link rel="stylesheet" type="text/css" href="master.css" />
<!--[if lte IE 8]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->
</head>

В файле master.css у вас будет это определение для вашего основного div:

div#page_container {
  width: 960px;
  height: auto;
  padding: 10px 10px 10px 10px;
  background: #ccc;
  drop-shadow: whatever...
  rounded-corner: whatever...
}

Теперь, в вашем файле ie.css, и поскольку на него ссылается ваша секунда, определение будет каскадно вниз, так что вы можете немного его изменить:

div#page_container {
  width: 960px;
  height: auto;
  padding: 15px 15px 15px 15px; /* this is key */
  background: #ccc url(/path/to/image.file) no-repeat top left;
}

Добавьте достаточно дополнительных отступов, чтобы тени падали в соответствии с фоновым изображением. Поскольку он распространяется каскадно, он перезаписывает исходный отступ в 10 пикселей, расширяя блочную модель, чтобы она соответствовала вашей дополнительной теневой графике.

Пара преимуществ этого метода включает:

  • Только IE увидит это определение и вызов изображения. Если это приложение большого объема, это сэкономит пропускную способность и любые задержки, связанные с вызовом.
  • Аналогичным образом, поскольку вы не жестко закодировали графику с закругленными углами, которую будет видеть каждый браузер, пользователям Firefox и Safari не нужно будет загружать сервер дополнительными вызовами изображений.
  • Нет необходимости добавлять еще один плагин javascript, который проверяет IE, создает новую разметку, время и т. Д ...
24 голосов
/ 26 апреля 2010

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

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

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

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

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

  • Изящные углы & jquery Угол : Оба имеют плохое сглаживание, и углы выглядят очень резкими. JQuery углы имеют проблемы с обработкой фоновых изображений.

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

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

отличный беспорядок http://meodai.ch/stackoverflow/nifty.png изящный дом беспорядок

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

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

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

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

22 голосов
/ 20 июля 2010

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

8 голосов
/ 30 апреля 2010

Я начал использовать скрипт .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 */
}
6 голосов
/ 11 марта 2011

Я использую CSS3PIE, который довольно легко реализовать, просто добавьте поведение: url (pie.htc); на тэг css и все готово .. все это делает за вас, также включает поддержку border-image, градиентов, box-shadow, rgba и некоторых других ... источник: http://css3pie.com/

4 голосов
/ 29 апреля 2010

для использования тени в IE:

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

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

конечно для programmatically IE-specific features используйте условные комментарии ! ; -)

3 голосов
/ 01 февраля 2011

Чтобы разрешить постепенную деградацию, держу пари, вы должны использовать этот скрипт с именем CssUserAgent из http://www.cssuseragent.org/

2 голосов
/ 25 апреля 2010

Nifty Corners Cube дает хорошие результаты и должен быть обратно совместимым вплоть до IE5.5.

1 голос
/ 25 апреля 2010

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...