Элемент заголовка HTML5 не отображает фоновое изображение

Question

Я работаю над новым шаблоном HTML5.Я использую элемент <header></header> на странице с простым фоновым изображением логотипа.

header{ width:100%; height:100px; background:url(/dev-acn/img/header-logo-bg.jpg) 45px center no-repeat; }

Страница разработчика: http://www.bcidaho.com/dev-acn/index.asp

Я вижу фоновое изображение на ПК Chrome, ПКFF4 и MAC FF5, однако он не отображается в IE6, IE7 или IE8 ... и когда я по какой-то причине открываю инструменты разработчика в IE8, в инспекторе кода не открывается открывающий тег элемента <header>, а только </header> закрывающий тег.

Разве IE не распознает элемент <header>, даже если у меня есть свойства, определенные в style.css?(расположен: http://www.bcidaho.com/dev-acn/css/style.css)

Answer 1

Вам необходимо включить html5shiv , который превращает новые семантические элементы HTML5 в элементы уровня блока, чтобы IE мог их стилизовать. Это простой взлом, поэтому проверьте источник, чтобы точно узнать, что он делает.

Answer 2

Разве IE не распознает элемент, даже если у меня есть свойства, определенные в style.css?

Правильно.Для версий ниже IE9 вам нужно использовать это:

http://code.google.com/p/html5shiv/

Вам также понадобится этот CSS:

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

Для получения дополнительной информации см.:

http://paulirish.com/2011/the-history-of-the-html5-shiv/

Answer 3

Я знаю, что это уже было решено, но я нашел другое решение для этого на http://orderedlist.com/resources/html-css/structural-tags-in-html5/.

Просто добавьте этот скрипт в верхнюю часть страницы, и новые элементы HTML5 отобразятправильно в старых версиях IE.

<script type="text/javascript">
    document.createElement('header');
    document.createElement('footer');
    document.createElement('section');
    document.createElement('aside');
    document.createElement('nav');
    document.createElement('article');
</script>

Просто хорошая альтернатива для нас, пуристов, которые не хотят полагаться на внешний источник.:)

Answer 4

Помимо проблем с HTML5, у вас также есть некоторые параметры в неправильном порядке для стиля фона.

Разделите их или расположите в правильном порядке.

Правильный порядок:

1. цвет фона
2. Фоновое изображение
3. фон-повторить
4. фон-вложение
5. фон положение

Вы можете пропустить некоторые, но они должны быть в правильном порядке.

Я редко использую комбинированную (сокращённо AKA) версию, потому что слишком раздражает запоминание порядка.