HTML5 语义元素的样式问题，例如 <section>、<nav> 和 <article>

Question

所以我正在使用 HAML 和 SASS 编写一些 HTML5 代码。

我目前有一个 ID 为“restaurant-info”的 DIV

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...

但是，该部分完全失去了它的背景颜色。但是，当我在 Firefox 中检查 section 元素时，它的正确样式与以前完全相同：

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

为什么在 Firefox 3.6.10 中简单地将样式正确的 DIV（仅由其在 CSS 中的 ID 标识）更改为 SECTION 元素会破坏样式？我检查了每一个可能的部分的“检查元素”，Firefox 告诉我计算的背景颜色是#FF0000，但它没有告诉我。这在 Safari 5.0.2 中似乎不是问题。

我能得出的唯一结论是，这是一个非常具体的错误。有人有其他想法吗？

Answer 1

您需要在所有块级 HTML5 元素中添加 display:block：

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

它们在大多数浏览器中都没有默认的 CSS 样式，未知元素在 Firefox 中被视为内联。