6

我创建具有多个div子元素的父元素,然后根据data-value属性在 JavaScript 中计算其宽度。

如果我总结所有孩子的计算宽度,我最终会得到 100%。但由于某种原因,孩子不会真正占据父母宽度的 100%:一部分白色像素出现在最后一个孩子之后。

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

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

跨不同浏览器的渲染组件

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

问题:

  1. 还有其他(正确的)方法可以让孩子适合父母吗?
  2. 圆角和overflow: hidden父母,我可以让它在所有浏览器中看起来都一样吗?
4

2 回答 2

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/

于 2012-09-17T10:19:20.623 回答
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 实际上位于其他 div 后面(您可以使用 inspect 元素看到这一点)

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

于 2012-09-17T10:20:52.987 回答