4

作为一项测试，我尝试将 a<div>显示为一个圆圈。里面有一些文本，<div>但其他地方是空的。

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

在 Chrome、Firefox、Opera 和 Safari 中进行测试我注意到，当光标刚好在圆圈区域之外但在如果未设置时可见的矩形区域内时，CSShover和 JavaScript的行为会有所不同。onmousedownborder-radius

这是光标在该位置时的结果：

  • Chrome：hover并onmousedown在圈外受到影响
  • Firefox：hover仅onmousedown在圈内受影响
  • 歌剧：hover并onmousedown在圈外受到影响
  • Safari：hover并onmousedown在圈外受到影响

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

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

4

2 回答 2

2

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

于 2013-06-30T17:57:04.390 回答
0

您是否尝试过使用 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;
}
于 2013-06-30T08:56:27.817 回答