带有边框的图像上的边框半径在Firefox和Chrome上不同

Question

这最好用图像解释。

火狐，右：

铬，错：

jsfiddle。

这是一张带有2px（红色）边框和6px边框半径的（完全绿色）图像。在我的设计中，边框几乎看不到，所以图片在Chrome中看起来完全正方形。

是否有可能在没有额外标记或JavaScript的情况下在Chrome中实现正确的结果？

Answer 1

我不相信你可以用Chrome来做到这一点。图片将延伸到border-radius的范围内，我认为这是预期的行为（否则他们只是没有注意到）。

例如，当using a div时，您可以看到背景的行为与其应该一样。你可以考虑using a div instead of img，并使用你的源图像作为背景（并强制其宽度和高度）。

说白了：在Chrome中，似乎没有办法强制图像被自身边界（甚至是其容器）隐藏，除非它被设置为背景。事实上，问题has been asked about before和blogged about以及（事实上，patrickzdb的评论可能会帮助你）。

Answer 2

显然，这是在浏览器的错误..

我通常适用的box-shadow铬，而不是边界。

所以，如果你不介意应用CSS黑客要解决它无javascript：http://jsfiddle.net/3cuHU/