HTML5 и CSS3 для IE7 и IE8
Я унаследовал веб-приложение, где передняя часть использует новые теги HTML5 (заголовок, nav, теги раздела) и новые атрибуты стиля CSS3 (закругленные границы). Веб-сайт выглядит потрясающе в Google Chrome и Safari.
Однако, клиент теперь жалуется, что веб-сайт нарушен для IE7 и IE8. Все находится вне выравнивания, и большинство стилей не отображаются.
Каков самый простой способ заставить этот сайт работать в IE7 и IE8? Должен ли я:
a) Применить некоторые хаки, чтобы браузеры IE принимали новые функции HTML5 и CSS3?
б) Полная переработка переднего конца?
Ответы
Ответ 1
Попробуйте этот прекрасный script (.js):)
А для закругленных углов я использую другой script (.htc)
используйте 1st:
<!--[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
Ответ 2
Для HTML5 я рекомендую Remy Sharp HTML5 Shim, хотя, чтобы увидеть эффект, вашим пользователям IE необходимо будет включить JavaScript. В основном он использует ошибку в IE6/7/8, которая позволяет распознавать элементы HTML5 после их создания в JavaScript с помощью функции document.createElement
.
Для вашего CSS есть несколько разных хаков, таких как CSS3 PIE, которые используют свойство "поведение" (которое уникально для IE) для имитации эффектов CSS3. Я лично воздержался от них, поскольку, по моему опыту, они очень легко ломаются и в конечном итоге становятся более сложными, чем они того стоят. Вместо этого я предпочитаю писать свой CSS, чтобы он изящно деградировал в IE, так что закругленные кнопки выглядят квадратными, но все равно выглядят хорошо.
Ответ 3
Вы можете попробовать css3pie http://css3pie.com/, который поможет с проблемами css3.
Ответ 4
modernizr http://modernizr.com/ будет хорошим выбором.
Ответ 5
Чтобы добавить к Karl и Alistair, я столкнулся с проблемой с CSS3Pie на моем сайте. Я использовал свой CSS-код с четырех месяцев назад, а градиенты CSS3 блокировали поля <input type="text"/>
, появляющиеся в IE7 или IE8. Только когда я снова просмотрел их сайт и увидел, что их новый CSS-код сработал.
Урок всегда проверяет сайты плагинов для самого последнего кода
Ответ 6
Независимо от новых семантических тегов, если вы собираетесь создавать эффект 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¶m2=value2)"></div>
ИЛИ
<img src="http://127.0.0.1/index/yourpagename.asp?param1=value1¶m2=value2" />
где значение параметра вводится с точки зрения выхода, необходимого для создания эффекта. то есть высота, ширина, цвет и т.д.