css - 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

我也面临这样的问题。这就是为什么还要为孩子定义边界半径。像这样写：

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