HTML5 + CSS и настройка ширины <HEADER>

Question

Я получил следующее css:

div#header, header { 
    height: 88px; 
    width: 100%; 
    background-image: url('/images/header.jpg'); 
    background-repeat:no-repeat; 
}

И следующий HTML:

<header></header>
<div id="header"></div>

Вторая HTML-строка делает именно то, что я хочу. Однако первая html-строка (

) этого не делает.

Я использую Firefox 3.6.8. В firebug разметка для обеих html-строк выглядит одинаково. В Internet Explorer у меня такая же проблема. Только Chrome отображает код, как и ожидалось.

Я сейчас очень смущен. Как это исправить?

Answer 1

Firefox 3.6 не имеет таблицы стилей User Agent, которая распознает элементы header как элементы уровня блока, так как для всех неизвестных элементов она отображается как встроенный элемент.

Добавление в эту строку должно помочь:

display: block; 

Убедитесь, что вы используете сброс HTML5, чтобы эти элементы отображались правильно для старых браузеров, которые не распознают эти новые элементы как блокирующиеэлементы уровня, такие как:

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

Answer 2

Если вам нужно использовать элементы HTML5, такие как header, и он должен работать в старых браузерах, таких как 6, 7 и 8. Чем помимо добавления display: block; к элементам, вам, возможно, придется использовать обходной путь javascript, который нацелен, то есть.

Вот пример из communitymx.com, который делает это для нескольких элементов HTML5:

<!--[if IE]>
  <script type="text/javascript">
  (function(){
    var html5elmeents = "address|article|aside|audio|
        canvas|command|datalist|details|dialog|
        figure|figcaption|footer|header|hgroup|
        keygen|mark|meter|menu|nav|progress|
        ruby|section|time|video".split('|');

      for(var i = 0; i < html5elmeents.length; i++){
            document.createElement(html5elmeents[i]);
        }
    }
  )();
  </script>
<![endif]-->

Источник: Работа HTML5 в IE6, IE7 и IE8

Вы можете заменить <!--[if IE]> на <!--[if lt IE 9]>, если ie9 поддерживает элементы так, как вам нужно.