HTML5 и CSS3 для IE7 и IE8

Я унаследовал веб-приложение, в котором интерфейс использует новые теги HTML5 (теги header, nav, section) и новые атрибуты стиля CSS3 (закругленные границы). Сайт выглядит потрясающе в Google Chrome и Safari.

Однако теперь клиент жалуется, что веб-сайт не работает для IE7 и IE8. Все не выровнено, и большинство стилей не отображаются.

Как проще всего заставить этот сайт работать в IE7 и IE8? Должен ли я: а) Применить какой-нибудь прием, чтобы заставить браузеры IE принимать новые функции HTML5 и CSS3? б) Полная переделка фронтенда?


html css internet-explorer-8 internet-explorer-7
person John    schedule 27.03.2011    source источник

Ответы (6)


arrow_upward
28
arrow_downward

Попробуйте этот прекрасный скрипт (.js) :)
А для закругленных углов я использую другой скрипт (.htc)

используйте 1-й:

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

используйте второй как:

-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
behavior: url(border-radius.htc);

Удачного создания сайта :)

Исходная ссылка больше не активна, и HTML5shiv перемещен.

Теперь доступно на GitHub

https://github.com/aFarkas/html5shiv

person Répás    schedule 27.03.2011
comment
Это отличный ответ !! +1 за рекомендацию html5shiv - person DarkThrone; 27.03.2011

arrow_upward
5
arrow_downward

Для HTML5 я рекомендую HTML5 Shim Реми Шарпа, хотя для просмотра В результате у ваших пользователей IE должен быть включен JavaScript. В основном он использует ошибку в IE6 / 7/8, которая позволяет распознавать элементы HTML5 после того, как они были впервые созданы в JavaScript с помощью функции document.createElement.

Для вашего CSS есть несколько различных приемов, таких как CSS3 PIE, которые используют свойство "behavior" (которое уникальный для IE) для имитации эффектов CSS3. Я лично воздерживался от этого, поскольку, по моему опыту, они очень легко ломаются и в конечном итоге доставляют больше хлопот, чем они того стоят. Вместо этого я стараюсь писать свой CSS так, чтобы он изящно деградировал в IE, чтобы округлые кнопки выглядели квадратными, но при этом выглядели красиво.

person Karl Nicoll    schedule 27.03.2011

arrow_upward
2
arrow_downward

Вы можете попробовать css3pie http://css3pie.com/, который поможет с проблемами css3.

person Alistair Laing    schedule 27.03.2011

arrow_upward
2
arrow_downward

modernizr http://modernizr.com/ будет хорошим выбором.

person Alex G    schedule 07.02.2013
comment
У меня на сайте установлен modernizr, но, похоже, это не имеет никакого значения, стиль полностью нарушен в IE8. - person MJCoder; 22.11.2013

arrow_upward
1
arrow_downward

Чтобы добавить к Карлу и Алистеру, я столкнулся с проблемой CSS3Pie на моем сайте. Я использовал их код CSS четыре месяца назад, и градиенты CSS3 блокировали отображение <input type="text"/> полей в IE7 или IE8. Только когда я снова зашел на их сайт и увидел их новый код CSS, он заработал.

Урок всегда заключается в проверке веб-сайтов плагинов на наличие самого свежего кода

person Danger14    schedule 03.12.2011

arrow_upward
1
arrow_downward

Независимо от новых семантических тегов, если вы намереваетесь создать эффект CSS3 в IE7 / 8, вы, безусловно, можете использовать классы графики asp.Net в качестве запасного варианта для IE7 / 8. Некоторые из эффектов, которые могут быть созданы с использованием графики .net:

Радиус границы, линейный градиент, радиальный градиент, тень блока ..

Вы можете создать этот эффект на странице asp.net, используя классы графики, и отобразить эту страницу как фоновое изображение любого элемента HTML. т.е.

<div style="background:url(http://127.0.0.1/index/yourpagename.asp?param1=value1&param2=value2)"></div>

OR

<img src="http://127.0.0.1/index/yourpagename.asp?param1=value1&param2=value2" />

где значения параметров вводятся с точки зрения вывода, необходимого для создания эффекта. т.е. высота, ширина, цвет и т. д.

person Umesh Chaurasiya    schedule 20.07.2016