Question

我想要完成的任务：

我正在尝试构建自己的，非常简单的进度条。它必须是HTML4，因为它用于Android应用程序（大多数Android浏览器不支持HTML5进度标记）

每当触发select组合框中的值更改时，我希望能够使用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中，它也能很好地工作）

Answer 1

我将overflow:hidden;和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;
}

HTML4进度条的问题

1 个答案: