javascript - 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>

您可以在此处查看正在运行的元素。

我的问题：

1. 我进入网站：选择了最大值的组合框，进度条显示为 100%
2. 我更改了组合框的值：一切都按预期工作
3. 我将组合框的值设置回 100%：现在我看到 2 个条，第一行一个绿色（看起来像宽度 = 100%），第二行一个红色（看起来像宽度 = 100%）

任何人都知道为什么会发生这种情况？它在 jsFiddle 上完美运行......

（顺便说一句，如果我将整个页面复制到 jsFiddle 中，它也可以完美运行）

Answer 1

我将overflow:hidden;and添加height:20px;到父 div。现在它工作正常。

见jsFiddle

CSS 现在看起来像这样：

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