Эмуляция пограничного радиуса CSS3 и box-shadow в IE7/8

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

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

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

Ответы

Ответ 1

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

Скажите, что у вас есть свой div с id #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;
}

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

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

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

Ответ 2

Отправляй сообщение: http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/

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

Ответ 3

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

Вот несколько вариантов, которые вы имеете до этого:

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

DD Roundies: этот script очень легкий, работает очень хорошо. Он работает без каких-либо фреймворков и отлично работает с jQuery и Prototype (я полагаю, что он хорошо работает с другими, но я не могу точно сказать). Он использует CSS3-приличия в браузерах, которые поддерживают CSS3. И использует тот же взлом, что и все остальные для IE. Антиалиазинг на этом работает очень хорошо. Мне нужно исправить себя. Это работает с файлом HTC. Он не помещает дополнительные элементы в ваш HTML.
Curvy Corners и jQuery Плагин Curvy Corners: Мне это нравится. Антиалиазинг работает очень хорошо. И он играет хорошо с фоновыми изображениями. Но с тенями CSS3 он не очень приятен. Он не проверяет, поддерживает ли ваш браузер CSS3 и всегда использует уродливое решение по добавлению элементов в ваш дом.
Nifty Corners и jquery Угол: Оба имеют плохой антиалиасинг, и углы выглядят очень острыми. У jQuery углов есть проблемы с обработкой фоновых изображений.

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

скрученные углы dom messing screenshot http://meodai.ch/stackoverflow/curvy.png пышный дом беспорядок

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

Ответ 4

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

Ответ 5

Я начал использовать .htc script, найденный здесь: Поддержка 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

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

Ответ 7

для тени в 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 используйте условные комментарии!; -)

Ответ 8

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

Ответ 9

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

Ответ 10

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

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

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