IE не стилизует теги HTML5 (с помощью shiv)

Question

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

Пример кода

<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;
}

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

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

Answer 1

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

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

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

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

.

Answer 2

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

Answer 3

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

section,
header {
    display: block;
}