孩子在Safari中突破父母圆角

Question

这是我的问题：我想使用ronded角来制作一个父div，我希望该元素的孩子（带有彩色背景）保持正方形，但我不希望广场的角落到指向圆形父母之外。这在大多数浏览器中都难以修复，我只需添加overflow：hidden隐藏到父级和 viola 。但是，在Safari中修复不起作用 - 孩子的方角指出圆形父母。所以我的问题是，有没有办法在父级上使用圆角来影响Safari中的孩子？

有两种明显的解决方法，但在这种情况下都不适用：

• 孩子必须填满父母的整个空间，所以添加一个 填充到父级（如上所述here）不是一种选择。
• 我也不能为孩子添加圆角，因为孩子通过javascript调整大小并用作状态指示器，因此需要是正方形。

以下是我的代码的jsFiddle：http://jsfiddle.net/henrikandersson/4Lnbt/

这是Chrome（左）和Safari（右）中的结果：

更新：我在OS X和Windows上运行Safari 5.1.7，结果相同。