CSS:如何让 child 适应 parent 的宽度

Question

我使用多个 div 子元素创建父元素，然后根据 data-value 属性在 JavaScript 中计算这些子元素的宽度。

如果我对所有 child 的计算宽度求和，我最终将得到 100%。但出于某种原因，子项不会真正占据父项宽度的 100%:一部分白色像素出现在最后一个子项之后。

这是一个证明这一点的 fiddle :http://jsfiddle.net/tqVUy/42/

Chrome 和 Firefox 渲染良好，我在 Safari 和 Opera 中遇到这个问题(请参见下图)。

除此之外，overflow 属性无法按预期工作，因为子元素与父元素 div 重叠(同样，仅在 Safari 和 Opera 中相关)。

问题:

1. 是否有其他(正确的)方式让 child 适应 parent ？
2. 父级的圆 Angular 和overflow: hidden，我可以让它在所有浏览器中看起来都一样吗？

Answer 1

我也遇到这样的问题。这就是为什么还要为 child 定义 border-radius 的原因。像这样写:

#component > div:first-child{
    border-radius:30px 0 0 30px;
}
#component > div:last-child{
    border-radius:0 30px 30px 0;
}

检查这个http://jsfiddle.net/tqVUy/49/