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

Question

<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; 
} 

Answer 1

什么是$ S，$ V和$克的HTML做;和<br>，对此？

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

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

说到这一点，你可以删除所有你使用的display: block属性，因为display属性对于浮动（除IE之外，在某种程度上，如上面的bug修复所示）被忽略。