问题：如何对HTML5语义化元素（如<section>、<nav>和<article>）进行样式设置？

Question

问题：如何对HTML5语义化元素（如<section>、<nav>和<article>）进行样式设置？

7

我正在使用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)背景进行样式设置。如果我检查这个部分元素，我会看到这个：

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

然而，当我将那个 DIV 改为 section，像这样：

%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中检查该部分元素时，它的样式与之前完全相同。

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

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

我唯一能得出的结论是这是一个非常特定的错误。还有其他想法吗？

- Andrew De Andrade

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ian Devlin · Accepted Answer

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

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

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