Html5 новых элементов (заголовок, nav, footer,..) не работает в IE

html5 новых элементов (заголовок, nav, footer,..) не работает в IE

Ответ 1

Вам нужно включить HTML5 shiv script, чтобы позволить стиль элементов HTML5 в старых браузерах IE: http://code.google.com/p/html5shiv/

Чтобы использовать, включите следующий script в свой элемент выше вашего CSS:

<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

Ответ 2

Вам нужно использовать HTML5 Shim. Вот подробное объяснение о том, почему это необходимо.

Чтобы использовать HTML5 Shim, вам просто нужно добавить следующее на своей странице <head> выше всех ваших объявлений CSS:

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

Ответ 3

Другой вариант - использовать Modernizr, который включает в себя HTML5 Shiv, а также обеспечивает обнаружение функции HTML5.

HTML 5 элементов в IE Modernizr проходит через небольшой цикл в JavaScript для включения различных элементов из HTML5 (а также abbr) для стилизации в Internet Explorer. Обратите внимание, что это не значит, что это внезапно IE поддерживает аудио или видео элемент, это просто означает что вы можете использовать раздел вместо div и стилизовать их в CSS. Вы будете также, вероятно, необходимо установить многие из этих элементов: block; видеть HTML5 Boilerplate CSS для примера. Начиная с Modernizr 1.5, это script идентичен тому, что используется в популярном html5shim/html5shiv библиотека. Оба варианта также позволяют печатать HTML5-элементы в IE6-8, хотя вы, возможно, захотите испытать удар производительности, если у вас есть 100kb css.

Поддерживаемые браузеры Мы поддерживаем IE6 +, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome. На мобильном телефоне мы поддерживаем iOS mobile Safari, Android Браузер WebKit, Opera Mobile, Firefox Mobile и все еще делая больше тестирования, мы считаем, что поддерживаем Blackberry 6+. ~ http://modernizr.com/docs/#html5inie

Следующие теги: article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section

Ответ 4

Используйте HTML5shiv.js или напишите javascript-код в HTML-комментариях.

<!--this condition is only for IE 8 and lesser browsers.-->

<!--[if lte IE 8]> // lte means LESS THAN & EQUAL TO IE8. 

<script>
document.createElement('header'); 
document.createElement('nav'); 
document.createElement('article');
document.createElement('section'); 
document.createElement('aside'); 
document.createElement('footer');
</script>
<style> 
header, nav, article, section, aside, footer{ display:block; } 
</style>

//Теперь эти элементы будут поддерживаться в IE8 и меньших браузерах.

Ответ 5

Если вы не заботитесь о некорректном использовании кода, просто используйте внутренние DIV для стилизации.

Эти разделы не могут быть написаны с помощью CSS с IE < 9 (без поддержки HTML5). Даже если вы поместите атрибут класса внутри тега раздела.

<section class="section outer">
    <h1>Level1</h1>
    some text
    <section class="section inner">
        <h1>Level2</h1>
        some more text
    </section>
</section>

Это потому, что IE < 9 убивает вложенность для неизвестных тегов. DOM выглядит сумасшедшим:

 <section class="section outer"></section>
 <h1>Level1</h1>
 some text
 <section class="section inner"></section>
 <h1>Level2</h1>
 some more text
 </section><//section>
 </section><//section>

Но вы можете использовать DIVs как IE < 9-Fallback, если вам не нравится использовать javascript shim's. Вместо того, чтобы стилизовать СЕКЦИИ, просто создайте внутренние DIV.

<section>
    <div class="section outer">
        <h1>Level1</h1>
        some text
        <section>
            <div class="section inner">
                <h1>Level2</h1>
                some more text
            </div>
        </section>
    </div>
</section>

Итак, у вас есть современные HTML5-теги для SEO, и все стили выполняются DIV для каждого браузера, как обычно. Это полный допустимый HTML5 и все еще работает, если javascript отключен.

Ответ 6

Используйте приведенный ниже script... это поможет вам.

Для каждого нового элемента вы хотите, чтобы IE < 9, чтобы узнать..add, как показано ниже:

document.createElement( "изделие" ); (в теге script)
document.createElement( "нижний колонтитул" ); (в теге script)

Спасибо вам

Ответ 7

Обновление - более новые версии IE поддерживают элементы структуры HTML5, за исключением нового элемента "main". Использование CSS reset, которое включает в себя "основной" элемент, такой как normalize, исправит это. Или вы можете добавить в свой проект следующий CSS:

    main { display: block;}