HTML 5 в Internet Explorer

UDAV · 8 Апр 2010

HTML 5 в Internet Explorer

IE как проблема
Сложно сказать, является ли это проблемой или особенностью Internet Explorer, но теги, которые он не знает, он просто не замечает. Конечно, можно сказать, что они нарушают стандарт HTML 4, который поддерживается в IE, но тем не менее, проблемы есть проблемы — даже в самой последней версии IE на новые теги из HTML 5 просто так не повесить стили CSS. В IE 9 это исправят, но у него пока не вышла даже бета-версия.
И как всегда под IE приходиться писать с помощью хаков

. Если создать элемент в Javascript document.createElement('article'), то IE начинает видеть новый тег.
Однако чуть позже мы встречаемся с другой проблемой. Этот хак не работает с содержимым, которое добавляется через innerHTML, которые любит использовать jQuery. Но и эта проблема обходиться с помощью JS-манипуляций.
Решение
Вначале разберёмся с нормальными браузерами. Само собой у новых тегов не будет каких-то специальных встроенных стилей (как например для <strong>). Они нам особо и не нужны, но не помешает сделать нужные элементы блочными в CSS:
aside, nav, footer, header, section { display: block }
Код включения HTML 5 тегов в IE уже написан и выложен, так что, чтобы не изобретая велосипед, вставляем в <head> (перед любыми новыми тегами

PHP:

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

Большинство HTML 5 сайтов использует скрипт по этому URL, так что велика вероятность, что он уже окажется в кеше браузера.
Решение innerHTML уже оформлено в виде Для просмотра ссылки Войди или Зарегистрируйся. Скачайте его, подключите к своему сайту, и весь добавляемый HTML оборачивайте с функцию innerShiv(html5).
Пример для jQuery:

PHP:

$('#example').append(innerShiv("<section><header>jQuery</header></section>"))

Пример на чистом JS:

PHP:

var s = document.createElement('section');
s.appendChild(innerShiv("<header>&ltPlain JS</header>"));
document.getElementById('example').appendChild(s);

Для записи $(html5).appendTo('#example'), нужно в innerShiv вторым аргументов передавать false, чтобы она возвращала результат в нужном для jQuery формате:

PHP:

$(innerShiv(html5, false)).appendTo('#example')
Но я просто сделал себе функцию $5, заодно убрав лишний код для нормальных браузеров:
if (jQuery.browser.msie) {
    window.$5 = function(html5) {
        return jQuery(innerShiv(html5, false))
    }
} else {
    window.$5 = function(html5) {
        return jQuery(html5)
    }
}

И пишу:

PHP:

$5(html5).appendTo('#example')

--- Взято отсюда

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Чувак · 17 Апр 2010

Сам сталкиваюсь с такой проблемой, что множество страниц новых сайтов не совсем корретно отображается в IE или совсем не открывается. Но я знаю, почему люди до сих пор им пользуются.

The Finn · 17 Апр 2010

Не знаю как у вас, но у меня например ИЕ 8 ниразу не вызывал нареканий, всё отображается именно так, как мне нужно.

Похоже мелкософт сдержал обещание и действительно переписал движок.

UDAV · 19 Апр 2010

The Finn написал(а):
Не знаю как у вас, но у меня например ИЕ 8 ниразу не вызывал нареканий, всё отображается именно так, как мне нужно.
Похоже мелкософт сдержал обещание и действительно переписал движок.

Угу, конечно! Ничего он не поддерживает! ИЕ это самый ужасный браузер! Пользуйтесь им дальше и успехов вам!

А вот таблица для сравнения, что и какой браузер поддерживает и не поддерживает. (css3 естественно)

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

HTML 5 в Internet Explorer

UDAV

Постоялец

Чувак

Постоялец

The Finn

Постоялец

UDAV

Постоялец