html5 设置元素样式,css – 设置HTML5语义元素的样式,例如和

所以我正在使用HAML和SASS处理一些

HTML5代码.

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

HAML：

#restaurant-info

%header#restaurant-header

%h2 Bob's Country Bunker

%nav#restaurant-tabs

...etc...

上海社会科学院：

#restaurant-info {

background: #F00;

}

在Firefox中,这是创建以下HTML：

Bob's Country Bunker

...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中,现在会产生以下标记：

Bob's Country Bunker

...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中的问题.

我能得出的唯一结论是,这是一个非常具体的错误.有没有其他想法？