Css在Internet Explorer中無法正確顯示

Question

本質上，我打算從屏幕頂部到底部創建一個進度條。分爲三部分，頂部是一種顏色，中間是另一種顏色，底部是另一種顏色。

不幸的是，此代碼只適用於FF和Chrome，但在IE（所有版本）中顯示不正確。它目前只在IE中顯示頂部顏色。

代碼：

html, body 
{ 
    height: 100%; 
    margin: 10px;overflow: hidden; 
} 

#head 
{ 
    height: 80px; 
    background-color:black; 
} 

#content 
{ 
    min-height: 100%; 
    height: 100%; 
    margin: 0 auto; /*Allow for footer height*/ 
    vertical-align:bottom; 
} 

#prgsBar 
{ 
    margin: 0 auto -80px; /*Allow for footer height*/ 
    background-color:gray; 
} 

#footer, #push 
{ 
    height: 100px; /*Push must be same height as Footer */ 
} 

HTML：

<div id='content' style='background-color:red'>  
    <div id='head'>   
    <h5>Hello</h5> 
    </div>  
    <div id='prgsBar' style='height: 29%;'/></div> 

Answer 1

你#prgsBar是自結束標記，不應該。

變化<div id='prgsBar' style='height: 29%;'/></div>到<div id='prgsBar' style='height: 29%;'></div>