Css无法在Internet Explorer中正确显示

时间:2012-07-20 13:40:32

标签: html css internet-explorer firefox google-chrome

基本上,我打算从屏幕顶部到底部创建一个进度条。分为三个部分,顶部是一种颜色,中间是另一种颜色,底部是另一种颜色。

不幸的是,此代码仅适用于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>   

1 个答案:

答案 0 :(得分:3)

你的#prgsBar是一个自我结束的标签,不应该。

<div id='prgsBar' style='height: 29%;'/></div>更改为<div id='prgsBar' style='height: 29%;'></div>