<div> "circle" browser consistency, border radius

Question

As a test, I tried to create a <div> as a circle. <div> has some text inside it, but otherwise it's empty.

Then, in JavaScript, I calculate offsetWidth and offsetHeight using a maximum of two, and assign it to a variable called diameter (although realistically, the width will probably always be larger). I use diameter to assign a <div> its width, height and borderRadius. The result is something 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 outside the area of ​​the circle, but inside the area of ​​the rectangle, which would be if border-radius not set.

Here are the results when the cursor is in this place:

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

Firefox's behavior has one that I would like to use sequentially, is there a way to make this possible?

Change If you find a solution, explain which browser you are using.

Answer 1

Looks like this issue has already been fixed in Chrome 30 Canary. Therefore, upcoming releases of Chrome and Opera (which have recently switched to the Chrome rendering engine) should behave just like Firefox. IE10 already behaves this way.

Answer 2

Have you tried using css hacks so that you can install certain types of css depending on the browser that the user is using. Here is a site that gives an explanation:

http://www.paulirish.com/2009/browser-specific-css-hacks/

If there is no circle violin here:

http://jsfiddle.net/rPtAV/6/

Here is the css that I used:

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