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行（＆lt; header＆gt;）不会。

我正在使用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; }

Answer 2

如果您需要使用像header这样的HTML5元素，它需要在旧版浏览器中工作，例如6,7和＆ 8.除了添加display: block之外;对于元素，您可能必须使用针对目标的javascript解决方法。

这是来自communitymx.com的一个示例，它为多个HTML5元素执行此操作：

<!--[if IE]>
  <script type="text/javascript">
  (function(){
    var html5elmeents = "address|article|aside|audio|
        canvas|command|datalist|details|dialog|
        figure|figcaption|footer|header|hgroup|
        keygen|mark|meter|menu|nav|progress|
        ruby|section|time|video".split('|');

      for(var i = 0; i < html5elmeents.length; i++){
            document.createElement(html5elmeents[i]);
        }
    }
  )();
  </script>
<![endif]-->

来源：Making HTML5 work in IE6, IE7 & IE8

如果ie9支持您需要的元素，则可能需要将<!--[if IE]>替换为<!--[if lt IE 9]>。

HTML5 + CSS并设置<header> </header>的宽度

2 个答案: