0

你们能帮我调整我的加载栏css和/或html吗？我当前的加载栏现在存在两个问题。

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

多余的阴影截图

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

div 离开容器

我知道我能overflow:hidden做到（我#loading_bar_container已经position:absolute在 当我删除#buffer（所以只有一个栏）并删除loading_bar'sposition:relative和#progress'sposition:absolute时，我得到了我想要的场景：

在此处输入图像描述

我将在此处添加代码的jsfiddle 片段，以便我们可以使用它。

干杯!

PS：我认为标签应该是加载栏，但我无法创建新标签，所以我将其添加为进度条。

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

4

1 回答 1

2

这似乎是由position:relative.

比较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_containerand 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;
}

然后你只需要为每个栏设置backgroundand 。box-shadow

在这里看到它：http: //jsfiddle.net/VeJNt/6/

它不是累积的（第二个栏为-8px，第三个栏为-16px，...）因为当您设置边距时，如果您设置position:relative并设置top为-8px，-16px...

如果您设置margin-top:10px为一个元素，它会下降 10px，但不会与下一个元素重叠（以下所有元素也会下降 10px）。

然后，如果您设置margin-top:-8px为第二个栏，它会向上 8 像素，但在它和下一个栏之间不会出现任何空间（以下所有栏也向上 8 像素）。然后，你不必设置margin-top:-16px到第三条，你只需要-8px，因为第二条已经上升了8px。

于 2012-08-29T20:31:22.987 回答