如何使HTML5的HTML5 <header>在IE中正常工作？

Question

我正在使用一個網站，除了＃nav-wrapper的一個問題外，一切看起來都不錯。在IE中，它一路走到了正確的位置。也就是說，它是正確的浮動，但是漂浮在＃nav-wrapper右邊，這是一個設置寬度，然後放置在設置寬度的標題中。所以我不確定爲什麼這一切都是正確的。這是一個WordPress網站soI've簡化了菜單和條幅等This is the site.

<div id="header-wrapper"> 
<header> 
     <div id="nav-wrapper"> 
     <span class="nav-swirl-top">The Stuffed Pepper, Summerland BC</span> 
     <nav id="access" role="navigation"> 
      MENU LIST 
     </nav><!-- #access --> 


      <div id="nav-updates"> 
     <p>Updates</p> 
     </div> 


      <span class="nav-swirl-bottom">The Stuffed Pepper</span>    
    </div><!-- #nav-wrapper --> 


    <div id="banner"> 
     <img src="http://www.mysite.com/img/banner1.png" alt="Banner 1">' 
    </div> 

</header> 
</div> 

<div id="main"> 
<div id="container"> 


#header-wrapper { width: 100%; height: 532px; background: url(img/header-bg.jpg) repeat-x;} 
header { clear: both; height: 620px; width: 900px;} 
#banner { position: absolute; top: 230px; width:700px; left: 50%; margin-left: -470px; z-index: 1; } 
#nav-wrapper { position: relative; clear: both; width: 252px; height: 365px; padding: 10px; float: right; margin-top: 230px;background-color: #650908; border: 1px solid #470604;} 
#container { clear: both; background: url(img/container-bg.jpg) repeat; border-bottom: 3px solid #9d1316; color: #ccc1a1; } 

下面是它看起來像。

所以，如果我現在有＃header-wrapper的設置寬度和高度，爲什麼我的測試顯示在它下面？只是不確定IE喜歡做什麼以及它如何選擇忽略樣式！

我很感激任何幫助。

UPDATE

不知道爲什麼它顯示的標題沒有正確關閉..

這是它真正的樣子。 我看到</hgroup/>看起來像你，但根本不適合我。

即使使用Firefox的開發工具它顯示正確

Answer 1

並非所有HTML5標籤工作/通過IE瀏覽器，尤其是舊版本的支持。

看到這個reference article。

有很多方法，試圖使事情IE瀏覽數：

• 使用HTML5 Shiv
• 使用Modernizr
• 見related SO question
• 使用jQuery solution

還要檢查該網站使用IE的開發者工具。看起來，header HTML沒有正確打開和關閉。看：