-webkit-border-radius与-moz-border-radius的行为不同

Question

我的网站在Safari和Firefox上的显示方式不同。我想让CSS在Safari上看起来一样。我知道我可以使用两个div框，一个用于轮廓，一个用于图像，但我喜欢在Firefox上我只需要一个，它可以弯曲轮廓和图像。反正有没有Safari曲线的轮廓和图像？

Safari浏览器：

火狐：

<img src="asset.jpg" class="example">

img.example { width: 250px; height: 250px; background: rgba(0, 0, 0, .6); padding: 18px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }

Answer 1

这是webkit浏览器中的已知错误

请参阅此example

所以简而言之，是的，现在你必须将图像包装成div。吸。

请参阅以下错误报告：

http://code.google.com/p/chromium/issues/detail?id=82417
https://bugs.webkit.org/show_bug.cgi?id=30475

现在，将其包装在div as I have done here

中