跨浏览器和系统的图像边界半径不一致？

Question

我发现了一些跨浏览器border-radius实现的奇怪行为。获取此代码：http://jsfiddle.net/pm7FZ/1/在Windows上，每个浏览器摘录Chrome都会对内部图像进行舍入：http://imgur.com/54In8 Chrome不会，图像保持正方形。

我没有OS X，但是我的朋友发给我了这个：https://img.skitch.com/20120925-eypjk593tdest3ud9hcji1sauf.png似乎它的行为有所不同。虽然另一位朋友说如果你在OS X上将border-radius设置为20px，它将围绕OS X版Firefox的图像角落。

问题 - 这里发生了什么？为什么这么多不一致。

显然很容易“修复”，只是好奇心。

Answer 1

我只能推测，但这是我怀疑正在发生的事情。如果您查看基本盒型号（http://www.w3.org/TR/2007/WD-css3-box-20070809/）的W3C规范，您将看到一个图形，演示如何布置元素。每个元素都有一个内容区域，填充，边框和边距区域。我相信浏览器会将这些区域中的每一个渲染为一个图层，并且FF会在内容图层上呈现“边框图层”，Chrome会将“内容图层”呈现在所有其他图层的顶部。在您的示例中，如果要从img标记中删除高度和宽度属性，您将看到图像确实已圆整但不受边框本身的影响。我没有找到关于浏览器应该如何处理这个问题的任何规范，但我很确定Chrome开发人员选择这种方法来挤出更多的性能。