html / css：加载栏（带缓冲区）

Question

你们可以帮我调整我的加载栏css和/或html。我目前的装载栏现在存在两个问题。

其中一个是在边框外左侧和右侧的条形图中有一些多余的阴影（这使得它看起来像边框半径在缩放时是像素化的）。我知道这是box-shadow的问题，因为当我删除#progress和#buffer的框阴影属性时，它不存在。

另一个很小但是真的很烦我。当进度/缓冲条刚开始加载（更改style="width:0.4%"）时，带有半径的div的形式超出了容器：

我知道我可以overflow:hidden它（我已经在#loading_bar_container中做过），但我认为position:absolute不想隐藏（我需要绝对的原因，我需要两个条在一个位置，相互重叠）。当我删除#buffer（因此只有一个条形码），并删除loading_bar的{​​{1}}和position:relative的{​​{1}}时，我会看到该情景我想要的是：

我将在这里添加jsfiddle fragment代码，以便我们可以使用它。

干杯！

PS：我认为标签应该是loading-bar但是我无法创建新标签，因此我将其添加为进度条。

编辑：我在Chrome中完成了这项测试，@ Oriol提到它在FF中运行良好。我已经检查过，FF确实以我想要的方式显示它。我已经检查过Safari，它显示的内容与Chrome相同。所以这个问题适用于Chrome和Safari。没有用IE检查（害怕）。

Answer 1

这似乎是由position:relative引起的Chrome错误。

将http://jsfiddle.net/VeJNt/2/与http://jsfiddle.net/VeJNt/3/

进行比较

然后你可以使用

#progress {
    margin-top:-8px;
}​

而不是position:relative和position:absolute。

请在此处查看：http://jsfiddle.net/VeJNt/4/

但为什么你同时拥有loading_bar_container和loading_bar？

我认为您应该简化代码：http://jsfiddle.net/VeJNt/5/

修改

如果你想要一个更通用的代码，它不依赖于条数，你可以使用

#loading_bar>div {
  border-radius:7px;
  height:100%;
  width:0%;
  margin-top:-8px;
}
#loading_bar>div:first-child {
  margin-top:0;
}

然后您只需将background和box-shadow设置为每个栏。

请在此处查看：http://jsfiddle.net/VeJNt/6/

它不是累积的（-8px到第二个柱子，-16px到第三个柱子，......）因为当你设置一个边距时，它就像你设置position:relative并设置{ {1}}到-8px，-16px ......

如果将top设置为一个元素，它会向下移动10px，但不会与下一个元素重叠（以下所有元素也会向下移动10px）。

然后，如果你将margin-top:10px设置为第二个条形，它会向上移动8px，但它与下一个条形图之间不会出现任何空格（以下所有条形图也会向上移动8px）。 然后，您不必将margin-top:-8px设置为第三个栏，您只需要-8px，因为由于第二个栏已经增加了8px。