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;
}

为什么简单地将正确设置样式的DIV（仅通过CSS中的ID识别）更改为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中被视为内联。

设置HTML5语义元素的问题，例如<section>，<nav>和<article> </article> </nav> </section>

1 个答案: