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

Question

最好用图片解释。

Firefox，右：

Chrome，错误：

jsfiddle

这是一个（全绿色）图像，边框为2px（红色），边界半径为6px。在我的设计中，边框几乎看不见，因此图像在Chrome中看起来完全是正方形。

是否可以在Chrome中获得正确的结果而无需额外的标记或javascript？

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

显然这是Chrome中的一个错误..

我通常会为chrome而不是border应用box-shadow。

所以，如果您不介意应用css hack来解决它而不使用javascript：http://jsfiddle.net/3cuHU/