Css 在 Internet Explorer 中无法正确显示答案

【问题标题】：Css not displaying correctly in Internet ExplorerCss 在 Internet Explorer 中无法正确显示
【发布时间】：2012-07-20 21:46:06
【问题描述】：

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

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

【问题讨论】：

能否提供HTML代码？

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

【解决方案1】：

您的#prgsBar 是一个自闭标签，不应该这样。

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

【讨论】：