两个重叠元素的边框半径；背景闪耀

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（无子项）。创建一个足够宽的图像（例如 1000 像素）和您选择的颜色（我个人会创建一个白色 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;