問題與HTML4進度條

Question

我想要完成的任務：

我試圖建立自己的，很簡單，進度條。它必須是HTML4，因爲它用於Android應用程序（大多數Android瀏覽器不支持HTML5進度標籤）

我希望能夠使用javascript更新它，只要選擇組合框中的值發生更改被觸發。元素如下所示：

<div style="width:100px"> 
    <div id="prog4" class="progressleft" style="width:100%"></div> 
    <div class="progressright"></div> 
</div> 

您可以看到元素in action here。

我的問題：

1. 我得到的網站上：組合框與最大值選擇，進度條顯示爲100％
2. 我改變組合框的值：家居按預期工作
3. 我將組合框的值重新設置爲100％：現在我看到2個條，第一行中有一個綠色（看起來像寬度= 100％），第二行有一個紅色（看起來像寬度= 100％）

任何人都知道爲什麼會發生這種情況？它完美的作品上的jsfiddle ...

（順便說一句，這也完美的作品，如果我整個頁面複製到的jsfiddle）

Answer 1

我加入overflow:hidden;和height:20px;父DIV。現在它工作正常。

見jsFiddle

的CSS現在看起來是這樣的：在Chrome

.progress { 
    overflow: hidden; 
    width:100px; 
    height:20px; 
} 
.progressleft { 
    float: left; 
    height: 20px; 
    background: #6d6 
} 
.progressright { 
    overflow: hidden; 
    height: 20px; 
    background: #d66; 
}