IE не стилирует теги HTML5 (с shiv)

Я пытаюсь создать стиль <header>, и он не работает в IE. Я использую Modernizr, но я сам пробовал shiv.

Пример кода

<section>
  <header>
    <h1>Title</h1>
  </header>
  <p>Body</p>
</section>

Стили:

section {
    border: 2px dotted black;
    padding: 0.25em;
}

header h1 {
    background-color: #ccc;
    text-align: center;
    margin: 0;
}

Я ожидаю границы вокруг содержимого заголовка и раздела, но вместо этого есть только '[' look border, а заголовок находится под ним.

Что происходит не так?

Ответы

Ответ 1

В IE даже с помощью shiv вам нужно объявить элементы HTML 5 как элементы блока. Я использую эту строку для Internet Explorer, но вы можете изменить ее для необходимых элементов.

header,nav,article,footer,section,aside,figure,figcaption{display:block}

Из Документация Modernizr:

Возможно, вы также захотите установить многие из этих элементов в display:block;

Ответ 2

Это зависит от стиля, который вы пытаетесь наложить на элемент. Так, как и Джеймс Лонг, прежде всего, пользовательские элементы inline по умолчанию. Для IE8 вы также можете присвоить элементу границу, добавив display: inline-block;.

Ответ 3

Иногда пользовательские элементы (как мы убеждаем IE использовать теги HTML5) по умолчанию inline. Попробуйте добавить следующий фрагмент CSS:

section,
header {
    display: block;
}