Css 使用百分比浮动的子对象在Chrome中不会100%填充容器

我搞不懂这个

它似乎在IE8+和Firefox中工作，但Chrome显示它“错了”（也许是对的，谁知道呢）：

我正在使用引导，所以我不确定这是否会影响什么

为了我的目的，这些条需要是流动的，所以像素宽度不起作用。我不确定IE/Firefox是否掩盖了一个问题，Chrome是否对我诚实

---

如果你想不出来，有没有其他方法来制作一组流畅的进度条？

将填充和边距设置为零。这将弥补你所看到的差距

将填充和边距设置为零。这将弥补你所看到的差距

我明白你的问题了。我猜它是以同样的方式舍入所有的百分比，所以当你将它们相邻浮动时，总宽度会有明显的变化

为了保持最大1px总误差，我要确保所有右边缘都是从主容器定义的，最后一个接触右边缘，而不是依赖浏览器补偿舍入误差。看看这个：

及

您可以使用CSS的选择器将单个div作为目标，而不是在标记中硬编码宽度或特殊类

但在我看来，这仍然有点难看，你必须玩一点，才能让你的圆角看起来再次正确

把它画在地图上，然后用这个基于html的版本作为后援怎么样

---

编辑：我对引导一无所知，但希望这仍然适用

我明白你的问题了。我猜它是以同样的方式舍入所有的百分比，所以当你将它们相邻浮动时，总宽度会有明显的变化

为了保持最大1px总误差，我要确保所有右边缘都是从主容器定义的，最后一个接触右边缘，而不是依赖浏览器补偿舍入误差。看看这个：

及

您可以使用CSS的选择器将单个div作为目标，而不是在标记中硬编码宽度或特殊类

但在我看来，这仍然有点难看，你必须玩一点，才能让你的圆角看起来再次正确

把它画在地图上，然后用这个基于html的版本作为后援怎么样

---

编辑：我对引导一无所知，但希望这仍然适用

您的问题在于进度条的大小。它的宽度是

514px

，里面有5个

div

s，宽度为20%。因此，每个内部

div

s的宽度是

514px/5=102.80px

，它只是省略了分数值。尝试给出进度条的宽度

515px

，并删除红色框的右边距

---

编辑1：您需要尝试保持进度条的宽度是内部

div

s数的乘积。

您的问题在于进度条的大小。它的宽度是

514px

，里面有5个

div

s，宽度为20%。因此，每个内部

div

s的宽度是

514px/5=102.80px

，它只是省略了分数值。尝试给出进度条的宽度

515px

，并删除红色框的右边距

---

编辑1：您需要尝试保持进度条的宽度是内部

div

s数的乘积。

在Windows和Mac OS上为我在Chrome中工作。@kinakuta:尝试调整窗口的宽度。@thirtydot我做了-可能我不理解问题-在所有浏览器上的行为都是相同的在Windows和Mac操作系统上，我在Chrome中的工作方式都是一样的。@kinakuta:尝试调整窗口的宽度。@thirtydot我做了-也许我不理解这个问题-所有浏览器上的行为都是一样的。谢谢，这将为我指明正确的方向。我正在通过Knockout.js构建酒吧，所以我应该能够处理这个问题。谢谢，这将为我指明正确的方向。我正在通过Knockout.js构建酒吧，所以我应该能够处理这个问题。

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