如何使用（進度）欄在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修復所示）被忽略。