Question

作为测试，我尝试将<div>显示为圆圈。 <div>里面有一些文字但是空的。

然后在JavaScript中我计算offsetWidth和offsetHeight，使用两者中的最大值，并将其分配给名为diameter的变量（尽管实际上宽度可能总是更大）。我使用diameter为<div>分配宽度，高度和borderRadius。结果看起来像一个圆圈（至少在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的行为是我一直想要使用的行为，有没有办法让这成为可能？

修改：如果您找到解决方案，请说明您正在使用的浏览器。

Answer 1

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

Answer 2

您是否尝试过使用css hacks，以便根据用户使用的浏览器设置特定的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;
}

<div>“circle”浏览器一致性，border-radius </div>

2 个答案: