代码之家 › 专栏 › 技术社区 › Rene Terstegen

html5+css并设置<header>

html5 css

3

Rene Terstegen · 技术社区 · 14 年前

我得到了以下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完全按照我的要求执行。但是,第一行(<header>)没有。

我正在使用火狐3.6.8。在Firebug中,两个HTML行的标记看起来完全相同。在Internet Explorer中,我也有同样的问题。只有chrome按预期显示代码。

我现在很困惑。如何解决这个问题?

2 回复 | 直到 13 年前

1

6

Yi Jiang G-Man 13 年前

火狐3.6没有能够识别 header 元素作为块级元素,因此对于所有未知元素,它都显示为内联元素。

加入这一行应该可以做到:

display: block;

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

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

2

1

Chris J 14 年前

如果需要使用HTML5元素,例如 header 它需要在旧的浏览器中工作,如IE 6、7和8。除了增加 display: block ;对于元素,您可能必须使用针对IE的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

您可能需要更换 <!--[if IE]> 具有 <!--[if lt IE 9]> 如果IE9以您需要的方式支持这些元素。