css3 border-radius不适用于子元素

时间:2012-09-19 18:36:41

标签: google-chrome safari webkit css3

我正在尝试开发在父div中具有边界半径的幻灯片框。它适用于Firefox,但在safari和chrome中遇到问题。

问题是子元素与父div的圆形边框重叠。

您可以在http://jsfiddle.net/7KgEh/6/看到示例。看看safari,chrome和firefox;你会看到右侧的差异,子div与父div重叠的圆形边框。

我搜索了互联网,但大多数帖子指出它是webkit错误。有人知道解决方案吗?

3 个答案:

答案 0 :(得分:2)

只需将overflow: hidden;添加到带有圆角边框的容器元素中。

答案 1 :(得分:0)

圆角正常工作,只需width:100%(页面)<div class='box'>,因此您无法看到它。尝试width:50%,你会看到我在说什么。 这里try this jsfiddle

答案 2 :(得分:0)

如果你不需要与那个背景进行交互,你可以用z-index掩埋它:

http://jsfiddle.net/7KgEh/23/

埋葬背景并将按钮向上移动成为它的兄弟并写下额外的线以保持它们对齐。如果这是出于显示目的,这将总体上更灵活(也允许诸如按钮与插槽重叠之类的东西)。如果存在结构性原因,那么另一种选择可能会更好。