如何让使用（进度）栏在 IE 中正确显示答案

【问题标题】：How to get usage(progress) bar to display properly in IE如何让使用（进度）栏在 IE 中正确显示
【发布时间】：2010-11-08 12:05:10
【问题描述】：

<div class="dd">
<div class="blue" style="WIDTH:$s%">$s%</div>
<div class="green" style="WIDTH:$v%">$v%</div>
<div class="red" style="WIDTH:$g%"><br>$g%</div>
</div>

在 FF 中，三个不同的元素显示在单个状态栏上，显示数量的累积。但是，在 IE 中，一切都搞砸了。我为每个元素得到单独的条，颜色和对齐方式都关闭了。

CSS：

/*These are for multiple element types on same status bar */ 
     div.dd { 
   /*position: relative; /* IE is dumb */
    display: block;                 
    float: left;     
    width: 500px; 
    height: 16px; 
    margin: 0 0 2px; 
    background: url("white3.gif"); 
    margin-left:20%; 
}

div.dd div.blue { 
    /*position: relative; */
    background: url("blue.gif"); 
    height: 16px; 
    width: 75%; 
    text-align:right; 
    display:block;
    float: left;
}
div.dd div.red { 
    /*position: relative; */
    background: url("red.gif"); 
    height: 16px; 
    width: 75%; 
    text-align:right; 
    display:block;
    float: left;
}

    div.dd div.green { 
    /*position: relative; */
    background: url("green.gif"); 
    height: 16px; 
    width: 75%; 
    text-align:right; 
    display:block;
    float: left;
}

【问题讨论】：

标签： html css internet-explorer firefox

【解决方案1】：

$s、$v 和 $g 在你的 HTML 中做了什么；还有<br>？

如果我删除<br>，并将这些 $ 值替换为加起来为 100% 的实际百分比，它在 IE6 中对我来说工作得很好，除了左边距。但这是由the doubled float-margin bug 引起的。

根据那篇文章，修复该边距的方法是将div.dd 上的display 属性设置为inline。

说到这一点，您可以删除您正在使用的所有display: block 属性，因为浮点数的显示属性被忽略（在某种程度上，IE 除外，如上述错误修复所示）。

【讨论】：

这是一个模板html文件，$替换为数字