css3 border-radius不适用于子元素

Question

我正在尝试开发在父div中具有边框半径的幻灯片框。它可以在Firefox上正常工作，但在Safari和chrome中出现问题。

问题在于子元素与父div的圆形边界重叠。

您可以在http://jsfiddle.net/7KgEh/6/上看到示例。看看Safari，Chrome和Firefox。您会在子div与父div的圆形边界重叠的右侧看到差异。

我搜索了互联网，但大多数帖子都将其视为Webkit错误。有人知道解决方案吗？

Answer 1

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

Answer 2

如果你不需要与该背景交互，你可以用 z-index 隐藏它：

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

埋掉背景并将按钮向上移动到它的同级按钮并编写额外的行以保持它们对齐。如果这是出于显示目的，那么总体上会更加灵活（也允许按钮与插槽重叠之类的事情）。如果存在结构性原因，那么另一种选择可能会更好。