CSS：如何让孩子适合父母的宽度

Question

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

如果我总结所有孩子的计算宽度，我将以100％结束。但由于某种原因，孩子们不会真正占据父母宽度的100％：一部分白色像素出现在最后一个孩子的后面。

这是一个演示这个的小提琴：http://jsfiddle.net/tqVUy/42/

Chrome和Firefox渲染得很好，我在Safari和Opera中遇到了这个问题（请看下面的图片）。

除此之外，overflow属性不能按预期工作，因为子元素与父div重叠（再次，仅在Safari和Opera中相关）。

问题：

1. 是否有其他（正确的）方法让孩子适合父母？
2. 父角的圆角和overflow: hidden，是否可以让所有浏览器看起来都一样？

Answer 1

我也面临这种问题。这就是为什么还要为孩子定义 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/

Answer 2

添加了css：

#component>div{height:100%;}
#component>div:first-of-type{border-radius:30px 0 0 30px;}
#component>div:last-of-type{border-radius: 30px;}

在js中编辑：

$('#component').children().not(':last').each(function () {

会发生什么：
最后一个div不会向左浮动，只会填充剩下的空间。 我在第一个和最后一个div添加圆角以修复角点问题。最后一个div在每个角落都有30px的半径，因为div实际上位于其他div之后（你可以用inspect元素看到这个）

演示：
http://jsfiddle.net/tqVUy/48/