問題與HTML4進度條

我試圖建立自己的，很簡單，進度條。它必須是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。

我的問題：

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

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

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

來源

2013-07-11 Daniel

對我的作品的Linux版本。多次改變數值然後回到100％，進度條總是正確的。 – marekful

@MarcellFülöp這是我的觀點。它只適用於Android – Daniel

我加入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; 
}

來源

2013-07-12 06:45:53 Daniel

問題與HTML4進度條

回答

相關問題