Safari边界半径bug

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

下面是一个例子：

Safari clipping

蓝色边框是实际的图像大小，所以设置边界半径的图像应用了图像的可见部分之外，这不利于。

这里是一些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

编辑：最后它变成了这个bug出现在最新的Safari浏览器的Windows，这是5.1.7和实际上是过时的。它也出现在其他较旧的浏览器：

Safari浏览器< 6.0
铬< 24.0
歌剧< 15.0
火狐< 4.0

来源

2014-09-30 Todo

不幸的是，其实是一个错误，因为早期的时代......你必须给边界半径图像本身为它工作（与WebKit的前缀OFC）） – Pinki 2014-09-30 09:09:39

Safari浏览器版？它工作正常版本7.0.6（9537.78.2），OSX Maveric – 2014-09-30 09:12:18

忘记提及Safari的Windows版本5.1.7 – Todo 2014-09-30 09:14:05

-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;

应该现在的工作

来源

2014-09-30 09:21:11

不，仍然相同后添加-webkit前缀 – Todo 2014-09-30 09:24:30

你有没有把它们添加到两个选择器？ – rnevius 2014-09-30 09:30:14

@rnevius是的，我将它们添加到两个选择器。那是赖特吗？ – Todo 2014-09-30 10:21:46

Safari边界半径bug

回答

相关问题