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

Question

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

Safari：

​

​

Firefox：

​

​

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