2

我想不通这个。

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

我正在使用 Bootstrap，所以我不确定这是否会影响任何事情。

http://jsfiddle.net/kamranayub/zVbHz/3/

出于我的目的，条形需要是流动的，因此像素宽度不起作用。我不确定 IE/Firefox 是否掩盖了问题以及 Chrome 是否对我诚实。

如果您无法弄清楚，对于一组流畅的进度条还有其他想法吗？

4

3 回答 3

1

我看到了你的问题。我想它以相同的方式四舍五入所有百分比，因此当您将它们彼此相邻浮动时，总宽度会发生明显变化。

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

http://jsfiddle.net/9nZYt/1/

.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 的版本作为后备怎么样？

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

于 2012-06-08T15:44:14.147 回答
0

你的问题是因为你的进度条的大小。它的宽度是514px5div秒，里面有 20% 的宽度。所以每个内部divs 的宽度是514px/5 = 102.80px并且它只是省略了小数值。尝试给出进度条的宽度515px并删除红色框的右边距。

编辑1：你需要尽量保持进度条的宽度是div里面s个数的乘积。

于 2012-06-08T15:48:49.060 回答
-1

Set the padding and margins to zero. That should fix the gap you are seeing.

于 2012-06-08T15:31:19.093 回答