0

我在浏览器边界半径实现中发现了一些奇怪的行为。获取此代码： http: //jsfiddle.net/pm7FZ/1/在 Windows 上，每个浏览器摘录 Chrome 会舍入内部图像：http: //imgur.com/54In8 Chrome 不会，并且图像保持方形。

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

问题 - 这里发生了什么？为什么前后矛盾这么多。

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

4

1 回答 1

0

我只能推测，但这就是我怀疑正在发生的事情。如果您查看基本盒子模型的 W3C 规范 ( http://www.w3.org/TR/2007/WD-css3-box-20070809/ )，您将看到一个演示元素如何布局的图形。每个元素都有一个内容区域、内边距、边框和边距区域。我相信浏览器将这些区域中的每一个都渲染为一个层，而 FF 将在内容层之上渲染“边框层”，Chrome 将在所有其他层之上渲染“内容层”。在您的示例中，如果您要从您的img标记您会看到图像确实变圆了，但不受边框本身的影响。我还没有找到关于浏览器应该如何处理这个问题的任何规范，但我很确定 Chrome 开发人员选择这种方法是为了提高性能。

于 2012-09-25T13:43:15.180 回答