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

增加的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是actualy其他div的后面（你可以看到这与检查元素）

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

Answer 2

我也面临那种类型的问题。这就是为什么定义边界半径也给孩子。像这样写：

#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/