Проблемы с оформлением семантических элементов HTML5, таких как <section>, <nav>и <article>

Question

Итак, я работаю над кодом HTML5, используя HAML и SASS.

У меня сейчас DIV с идентификатором "restaurant-info"

HAML:

#restaurant-info
  %header#restaurant-header
    %h2 Bob's Country Bunker
  %nav#restaurant-tabs
  ...etc...

SASS:

#restaurant-info {
  background: #F00;
}

В Firefox создается следующий HTML-код:

<div id='restaurant-info'>
  <header id='restaurant-header'>
    <h2>Bob's Country Bunker</h2>
  <nav id='restaurant-tabs'>
    ...etc...

Этот блок правильно оформлен в браузере на красном (# F00) фоне. Если я проверяю элемент section, я вижу это:

#content #restaurant-info {
  -moz-border-radius:5px 5px 5px 5px;
  background:none repeat scroll 0 0 #FF0000;
  margin-top:20px;
  overflow:hidden;
}

Однако, когда я изменяю этот DIV на раздел, примерно так:

%section#restaurant-info
  %header#restaurant-header
    %h2 Bob's Country Bunker
  %nav#restaurant-tabs
  ...etc...

В Firefox это теперь приводит к следующей разметке:

<section id='restaurant-info'>
  <header id='restaurant-header'>
    <h2>Bob's Country Bunker</h2>
  <nav id='restaurant-tabs'>
    ...etc...

Однако раздел полностью теряет цвет фона. Однако, когда я иду, чтобы проверить элемент section в Firefox, он правильно стилизован точно так же, как и раньше:

#content #restaurant-info {
  -moz-border-radius:5px 5px 5px 5px;
  background:none repeat scroll 0 0 #FF0000;
  margin-top:20px;
  overflow:hidden;
}

Почему простое изменение правильно оформленного DIV (который идентифицируется только по его идентификатору в CSS) на элемент SECTION нарушает стилизацию в Firefox 3.6.10? Я прошел «элемент проверки» для каждого возможного фрагмента, и Firefox сказал мне, что вычисляемый цвет фона - # FF0000, но он мне этого не показывает. Это не является проблемой в Safari 5.0.2.

Единственный вывод, который я могу сделать, - это очень специфическая ошибка. У кого-нибудь есть другие идеи?

Answer 1

Вам необходимо добавить display:block ко всем элементам HTML5 уровня блока:

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

Ни один из них не имеет стиля CSS по умолчанию в большинстве браузеров, а неизвестные элементы рассматриваются как встроенные в Firefox.