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

问题描述

作为测试，我尝试将< div> 显示为圆形。 < div> 里面有一些文本，但其他都是空的。

offsetWidth 和 offsetHeight ，使用两者的最大值，并将其分配给名为直径（虽然现实的宽度可能总是更大）。我使用 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受影响的圈子外和 $


• Safari： hover 和 onmousedown 受到圈外的影响

：如果你找到一个解决方案，请解释一下。您使用的浏览器。

解决方案

Chrome 30 Canary似乎已修复此问题。因此，即将发布的Chrome和Opera（最近改用Chrome的渲染引擎）的行为应与Firefox相同。 IE10已经以这种方式表现。

As a test I tried making a <div> appear as a circle. The <div> has some text inside of it but otherwise is empty.

Then in JavaScript I calculate the offsetWidth and offsetHeight, use the maximum of the two, and assign it to a variable named diameter (although realistically the width would probably always be larger). I use diameter to assign the <div> its width, height, and borderRadius. The result is something that looks like a circle (at least in Chrome, Firefox, Opera, and Safari. I have not tested IE).

Testing in Chrome, Firefox, Opera, and Safari I noticed that this behaves differently for CSS hover and JavaScript onmousedown when the cursor is just outside the area of the circle but inside the area of the rectangle that would be visible if border-radius was not set.

Here's the results when the cursor is in that spot:

• Chrome: hover and onmousedown affected outside the circle
• Firefox: hover and onmousedown only affected inside the circle
• Opera: hover and onmousedown affected outside the circle
• Safari: hover and onmousedown affected outside the circle

The behavior Firefox has is the one I'd like to consistently use, is there a way to make this possible?

Edit: If you find a solution please explain what browser you are using.

解决方案

It seems that this issue is already fixed in Chrome 30 Canary. So the upcoming releases of Chrome and Opera (which has recently switched to Chrome's rendering engine) should behave the same way as Firefox. IE10 already behaves this way.

这篇关于< div> “圆”浏览器一致性，border-radius的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！