HTML5 + CSS并设置<HEADER>的宽度

Question

我得到了以下css:

div#header, header { 
    height: 88px; 
    width: 100%; 
    background-image: url('/images/header.jpg'); 
    background-repeat:no-repeat; 
}

以下HTML:

<header></header>
<div id="header"></div>

第二个HTML行完全符合我的要求.但是,第一个html行(<header>)没有.

我正在使用Firefox 3.6.8.在firebug中,html-line的标记看起来完全一样.在Internet Explorer中我遇到了同样的问题.只有Chrome会按预期显示代码.

我现在很困惑.如何解决这个问题？

Answer 1

Firefox 3.6没有用户代理样式表将header元素识别为块级元素,因此对于所有未知元素,它都显示为内联元素.

添加这一行应该可以做到这一点:

display: block; 

确保使用HTML5重置,以便这些元素可以正确地显示为不能将这些新元素识别为块级元素的旧浏览器,例如:

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