Javascript <；部门>&引用；圈；浏览器一致性，边界半径

作为测试，我试着让一个

显示为一个圆圈。

中有一些文本，但在其他地方是空的

然后在JavaScript中，我计算

offsetWidth

和

offsetHeight

，使用两者中的最大值，并将其分配给名为

diameter

的变量（尽管实际上宽度可能总是更大）。我使用

diameter

指定

的宽度、高度和边界半径。结果看起来像一个圆圈（至少在Chrome、Firefox、Opera和Safari中是这样，我还没有测试过IE）

在Chrome、Firefox、Opera和Safari中进行测试时，我注意到当光标刚好位于圆圈区域之外，但位于矩形区域内时，CSS

hover

和JavaScript

onmousedown

的行为会有所不同，如果未设置

边框半径

，矩形区域将可见

以下是光标位于该点时的结果：

• Chrome:

  悬停

  和

  onmousedown

  受圆圈外的影响
• Firefox:

  hover

  和

  onmousedown

  仅在圆圈内受影响
• Opera:

  悬停

  和

  onmousedown

  受圆圈外的影响
• 狩猎：

  悬停

  和

  onmousedown

  受圆圈外的影响

Firefox的行为正是我想要一直使用的，有没有办法做到这一点

---

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

您是否尝试过使用css黑客，以便根据用户使用的浏览器设置特定的css类型。这里有一个网站给出了解释：

如果不是，这里有一个圆圈：

以下是我使用的css：

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

---

似乎Chrome30金丝雀已经解决了这个问题。因此，即将发布的Chrome和Opera（最近已切换到Chrome的渲染引擎）的表现应该与Firefox相同。IE10已经这样做了。

这是一个详尽的CSS选择，我不知道如何克服使用它的Chrome/Opera/Safari。JSFIDLE链接中的示例与我描述的问题相同，请尝试添加

。circle:hover{background:#0f0；}

以查看它。边框半径可以在不同的浏览器中使用，例如-webkit border radius用于chrome和safari，-moz border radius用于firefox，并为边框半径赋值：100%我仍然在chrome、Opera和，还有狩猎。Hive7，您正在哪个浏览器中查看它？我也尝试添加到您的JSFIDLE中，但对行为没有影响：您能制作一个JSFIDLE来说明您的问题吗？我的猜测是，只有Firefox才能正确解释您正在使用的属性。因此，弄清楚它是什么，您应该在所有浏览器中都有相同的行为。添加

.circle:hover{background:#0f0；}

将显示

悬停

问题。在我这方面，这项工作与Chrome、Firefox、Safari和IE9+中的预期一样：只需查看一下（使用Safari），如果未设置

边框半径

，则圆圈外的矩形区域将变成蓝色。将

width

和

height

设置为更大的值会使这一点更加明显。基本上这意味着我不能指望它在短期内对大多数人起作用，对吧？不，我的意思是这个问题很快就会消失，并最终对大多数人起作用。但不幸的是，我还没有找到Chrome、Safari和Opera现有稳定版本的解决方法。问题是，如果我用它制作了一个网站，我会用JavaScript定位这些圆圈，而这些圆圈会非常靠近。如果浏览器行为不正确，在有问题的区域单击可能会导致对单击的圆圈的混淆。是的，对于非常接近的圆圈，可能会发生这种情况。在这种情况下，最好使用SVG或老式图像映射。