"circle" 浏览器兼容性，边框半径

Question

作为一个测试，我尝试让一个<div>呈现为圆形。这个<div>里面有一些文本，但其他方面为空。

然后在JavaScript中，我计算offsetWidth和offsetHeight，使用其中较大的值，并将其赋值给一个名为diameter的变量（虽然实际上宽度可能总是较大）。我使用diameter来为<div>指定宽度、高度和borderRadius。结果看起来像一个圆形（至少在Chrome、Firefox、Opera和Safari中。我没有测试IE）。

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

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

• Chrome：在圆形区域外受到hover和onmousedown影响
• Firefox：只在圆形区域内受到hover和onmousedown影响
• Opera：在圆形区域外受到hover和onmousedown影响
• Safari：在圆形区域外受到hover和onmousedown影响

我想始终使用Firefox的行为，是否有办法实现这一点？

编辑：如果您找到了解决方案，请解释您正在使用的浏览器。

- asimes

---

你能否创建一个 jsfiddle 来说明你的问题？我猜测你正在使用的某个属性只被 Firefox 正确解释了。因此，找出它是什么，你应该在所有浏览器中得到相同的行为。 - Frederik.L

下面Hive7给出的答案有一个jsfiddle链接，用于说明这个问题。添加.circle:hover {background:#0f0;}将显示hover问题。 - asimes

在我的电脑上，这段代码在Chrome、Firefox、Safari和IE9+中都能正常工作：http://jsfiddle.net/KLFLG/ - Frederik.L

刚刚（使用Safari）查看了它，如果未设置border-radius，圆形外的矩形区域会变成蓝色。将width和height设置为更大会使这一点更加明显。 - asimes

Answer 1

看起来Chrome 30 Canary版本已经解决了这个问题。因此，即将发布的Chrome和Opera（最近已切换到Chrome的渲染引擎）应该与Firefox表现相同。IE10已经表现出这种方式。

- Ilya Streltsyn

---

基本上这意味着我不能指望它在不久的将来适用于大多数人，对吗？ - asimes

不，我的意思是问题很快就会消失，最终对大多数人都能正常工作。但不幸的是，我还没有找到现有稳定版本的Chrome、Safari和Opera的解决方法。 - Ilya Streltsyn

问题在于，如果我使用这个来制作网站，我将使用JavaScript定位圆圈，并且圆圈会非常靠近。似乎在错误的浏览器行为下，点击有问题的区域可能会导致混淆哪个圆圈被点击了。 - asimes

是的，对于非常接近的圆形，这种情况可能会发生。对于这种情况，最好使用SVG或旧式图像映射，并使用<area shape="circle">。 - Ilya Streltsyn

Answer 2

你尝试过使用CSS Hack吗？这样你可以根据用户使用的浏览器设置特定的CSS类型。这里是一个解释的网站：

http://www.paulirish.com/2009/browser-specific-css-hacks/

如果没有的话，这里有一个圆形的代码片段：

http://jsfiddle.net/rPtAV/6/

这是我使用的 CSS：

.circle {
    padding: 20px;
    background: red;
    width: 20px;
    border-radius: 20000px;
    height: 20px;
}

- Hive7

---

这是一个详尽的CSS选择器，我不确定如何克服Chrome / Opera / Safari中的它。在jsfiddle链接中的示例有我描述的相同问题，请尝试添加.circle:hover {background:#0f0;}以查看它。 - asimes

边框半径可以在不同的浏览器中使用，如Chrome和Safari的-webkit-border-radius，Firefox的-moz-border-radius，并为border-radius属性赋值100%。 - Ichigo Kurosaki

我在Chrome、Opera和Safari中仍然看到相同的问题。Hive7，你在哪个浏览器中查看它？我也尝试在你的jsfiddle中添加，但行为没有改变：http://jsfiddle.net/rPtAV/9/ - asimes