Safari边界半径bug

Question

我知道有很多相关的问题/答案，但是它们似乎都没有解决我的问题，因为我的图像在包装div内，但不是共享包装div的宽度/高度（它更宽），因此图像的一部分保持不可见，如果我将边框半径设置为包装div和图像（我遇到的解决方案之一），它就不起作用。

以下是一个例子：

蓝色边框是实际图像尺寸，因此将图像的边框半径设置在图像的可见部分之外，这无济于事。

这是一些css：

.image_wrapper {
   display: block;
   position: absolute;
   top: 0px;
   bottom: 0px;
   left: 0px;
   right: 0px;
   overflow: hidden;
   border-top-left-radius: 27px;
   border-top-right-radius: 27px;
   border-bottom-left-radius: 27px;
   border-bottom-right-radius: 27px;
}
.image_wrapper img {
   width: 288px;
   margin-left: -48px;
   height: 100%;
   border-top-left-radius: 27px;
   border-top-right-radius: 27px;
   border-bottom-left-radius: 27px;
   border-bottom-right-radius: 27px;
   background-clip: border-box;
}

jsbin中的完整示例（打开链接时点击CSS标签查看其内容）。

那么你有什么想法如何解决这个问题？它只发生在Safari中，它真的很烦人。

忘记提及Safari for Windows 5.1.7版

编辑：最后结果发现这个错误出现在最新的Safari for Windows上，这是5.1.7并且实际上已经过时了。它也出现在其他旧版浏览器上：

• Safari＆lt; 6.0
• Chrome＆lt; 24.0
• Opera＆lt; 15.0
• Firefox＆lt; 4.0

Answer 1

尝试使用这样：

-webkit-border-top-left-radius: 27px;
-webkit-border-top-right-radius: 27px;
-webkit-border-bottom-left-radius: 27px;
-webkit-border-bottom-right-radius: 27px;

它应该现在可以使用