<div> "circle" 浏览器一致性，border-radius答案

【问题标题】：<div> "circle" browser consistency, border-radius<div> "circle" 浏览器一致性，border-radius
【发布时间】：2013-06-27 15:18:24
【问题描述】：

作为测试，我尝试将<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 在圈外受影响
Firefox：hover 和 onmousedown 仅在圈内受到影响
Opera：hover和onmousedown在圈外受影响
Safari：hover 和 onmousedown 在圈外受到影响

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

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

【问题讨论】：

你能做一个 jsfiddle 来说明你的问题吗？我的猜测是您正在使用的属性只会被 Firefox 正确解释。因此，弄清楚它是什么，您应该在所有浏览器中都有相同的行为。
Hive7 下面给出的答案有一个说明问题的 jsfiddle 链接。添加.circle:hover {background:#0f0;} 将显示hover 问题。
在我看来，这在 Chrome、Firefox、Safari 和 IE9+ 中按预期工作：jsfiddle.net/KLFLG
只是看了一下（使用 Safari），如果未设置 border-radius，则矩形所在的圆外区域会使圆变成蓝色。将width 和height 设置得更大可以使这一点更加明显。

标签： javascript html css

【解决方案1】：

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

【讨论】：

基本上这意味着我不能依赖它在短期内为大多数人工作，对吧？
不，我的意思是问题很快就会消失，并且最终对大多数人都有效。但不幸的是，我还没有找到 Chrome、Safari 和 Opera 现有稳定版本的解决方法。
问题是，如果我使用它创建了一个网站，我会使用 JavaScript 定位圆圈，并且圆圈会非常靠近。似乎在有问题的区域点击错误的浏览器行为可能会导致混淆点击了哪个圆圈。
是的，对于非常接近的圈子，这可能会发生。对于这种情况，使用 SVG 或带有的老式图像映射可能会更好。

【解决方案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;
}

【讨论】：

这是一个详尽的 CSS 选择，我不确定如何使用它来克服 Chrome / Opera / Safari。 jsfiddle链接中的例子和我描述的问题一样，试试加.circle:hover {background:#0f0;}看看吧。
边框半径可以在不同的浏览器中使用，如chrome和safari的-webkit-border-radius，firefox的-moz-border-radius，并赋予border-radius的值：100%跨度>
我在 Chrome、Opera 和 Safari 中仍然看到同样的问题。 Hive7，你在看什么浏览器？我也尝试添加到您的 jsfiddle，但对行为没有影响：jsfiddle.net/rPtAV/9