你们可以帮我调整我的加载栏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检查(害怕)。
答案 0 :(得分:2)
这似乎是由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。