两个重叠元素的边界半径;背景闪耀着

Question

我使用2个重叠元素制作了CSS进度条。元素的CSS如下：

#status_progressbar {
  height: 22px;
  width: 366px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #000;
  cursor: pointer;
}
#status_progressbar_progress {
  height: 22px;
  background: #eee;
  float: right;
  -moz-border-radius: 0 10px 10px 0;
  -webkit-border-radius: 0 10px 10px 0;
  border-radius: 0 10px 10px 0;
  /* width controlled by Rails backend, using inline style */
}

不幸的是，来自父母的背景在右边缘部分可见，您可以在此图片中清楚地看到。由于子元素的背景应该与父元素精确重叠，我不知道为什么会这样。

[在Firefox 4中拍摄的照片]

也许有人可以向我解释为什么会发生这种情况以及如何解决它？

Answer 1

另一种方法是简单地使用status_progressbar div（无子级）。创建一个足够宽的图像（例如1000px）和您选择的颜色（我个人创建一个50％的白色不透明度）。

然后：

#status_progressbar {
  height: 22px;
  width: 366px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #000 url("/path/to/image') repeat-y 0 0;
  cursor: pointer;
}

然后我会用javascript操纵背景位置属性总是提供px值而不是％，因为％50会使图像居中。

var prcnt = (YOURPERCENTAGE/100)* 366;

Answer 2

这是一个已知问题。绕过它的一种方法是在需要彩色边框时嵌套圆形元素。用与边框宽度相同的量填充另一个框。

更多信息可以在@gonchuki的这篇博客文章中找到：Standards Compliancy is a lie (or, how all browsers have a broken border-radius)

Answer 3

通过稍微调整CSS，我得到了相当不错的结果。 （DEMO - 在Chrome＆amp; FF中测试）

#status_progressbar_progress {
    ...
    margin-right:-1px; 
    ...
}

这只是通过像素向右推动灰色div。你甚至可以将它增加到2个像素，我认为它看起来更好。确保在计算中补偿像素变化。

Answer 4

我认为这是因为浏览器尝试对边框进行抗锯齿，它可能通过调整透明度来实现这一点，因此你的底部div是黑色和顶部灰色，所以黑色得到低谷。 （不要引用我这个，但这至少对我来说是合乎逻辑的。）

您是否尝试将status_progressbar和status_progressbar_progress包装在另一个div中并将border-radius和overflow:hidden提供给该div？

Answer 5

您可以尝试在背景元素上将右侧的边框半径向上更改1px。这可能会让它消失在前面

之后