我无法弄清楚这一点。使用百分比漂浮的儿童在Chrome中不填充容器100％
似乎在IE8 +和Firefox的工作，但浏览器就会显示为“错误”（也许是正确的，谁知道）：
我使用的引导，所以我不知道这是影响一切。
http://jsfiddle.net/kamranayub/zVbHz/3/
酒吧需要是液体，我的目的，所以像素宽度将不起作用。我不确定IE/Firefox是否掩盖了问题，以及Chrome对我是否诚实。
如果你无法弄清楚，任何替代想法流体设置的进度条？
我看到你的问题。我想它会以相同的方式将所有百分比四舍五入，因此当您将它们相互浮动时，总宽度会有显着变化。
为了保持最大1px的总误差，我要确保所有的右边缘都是从主容器中定义的，而最后一个接触右边缘，而不是依靠浏览器补偿舍入错误。检查了这一点：
.progress {
position:relative;
border: 1px solid black;
box-sizing: border-box;
}
.progress .bar {
position:absolute;
left:0;
border-right: 1px solid white;
}
.progress .bar:first-child {
border-right:none;
}
.progress .bar.bar-remaining {
filter: none;
background: red;
}
和
<div class="progress">
<div class="bar bar-remaining" style="width: 100%"></div>
<div class="bar bar-remaining" style="width: 75%"></div>
<div class="bar" style="width: 50%"></div>
<div class="bar" style="width: 25%"></div>
</div>
，您可以定位与CSS的nth-child选择，而不是硬编码的宽度或特殊班级在您的标记个体的div。
但在我看来，它仍然有点丑陋，你必须玩一点才能让你的圆角看起来再合适不过了。
怎么样在HTML5 Canvas上绘制它并使用这个基于html的版本作为回退？
编辑：我什么都不知道bootstrap，但希望这仍然适用！
谢谢，这将指向我正确的方向。我正在通过Knockout构建酒吧。JS，所以我应该能够处理这个问题。 – kamranicus
将填充和边距设置为零。这应该能弥补你所看到的差距。
你的问题是因为你的进度条的大小。它的宽度是514px，你有5个div s，里面有20％的宽度。所以每个内部div的宽度是514px/5 = 102.80px，它简单地省略了小数值。尝试给你的进度条的宽度515px并删除红色框的右边距。
编辑1：您需要尝试保持进度条的宽度是内部数字div的倍数。
在Windows和Mac OS上工作在Chrome上。 – kinakuta
@kinakuta：尝试调整窗口的宽度。 – thirtydot
@thirtydot我做过 - 也许我不明白这个问题 - 所有浏览器的行为都是一样的 – kinakuta