javascript - "circle"浏览器一致性，border-radius

Question

作为测试，我尝试制作一个 <div>显示为一个圆圈。 <div>里面有一些文本，但其他部分是空的。

然后在 JavaScript 中我计算了 offsetWidth和 offsetHeight ，使用两者中的最大值，并将其分配给名为 diameter 的变量(尽管实际上宽度可能总是更大)。我用 diameter分配 <div>它的宽度、高度和边框半径。结果是一个看起来像圆圈的东西(至少在 Chrome、Firefox、Opera 和 Safari 中是这样。我没有测试过 IE)。

在 Chrome、Firefox、Opera 和 Safari 中进行测试，我注意到这对于 CSS 的行为不同 hover和 JavaScript onmousedown当光标刚好在圆圈区域之外但在矩形区域内时，如果 border-radius 则可见。没有设置。

这是光标位于该位置时的结果:

• Chrome :hover和 onmousedown影响圈外
• 火狐:hover和 onmousedown只影响圈内
• 歌剧:hover和 onmousedown影响圈外
• Safari :hover和 onmousedown影响圈外

Firefox 的行为是我想一直使用的行为，有没有办法让这成为可能？

编辑:如果您找到解决方案，请说明您使用的浏览器。

Answer 1

这个问题似乎已经在 Chrome 30 Canary 中修复了。因此，即将发布的 Chrome 和 Opera(最近已切换到 Chrome 的渲染引擎)的行为方式应该与 Firefox 相同。 IE10 已经这样做了。