Geek asks and answers

Small dead space on chrome div button

I can not explain it. I have a div that button. I use: active psuedo class and position: relative; to move it slightly down and to the right when pressed to give it an animation. For some reason, this button in Chrome has a little dead space halfway between the text and the edge of the button. The psuedo class is still working, but the Javascript on the button is not working. If I remove the relative position, the problem will disappear. This also happens in Firefox, but the dead space in Firefox is at the very edge where the button goes out of the way, which makes sense, but also needs to be fixed.

I created a JSFiddle to show the problem: http://jsfiddle.net/dillydadally/CUHA7/6/

Any idea why this is happening? Is there any way to fix this?

+5
source share
1 answer

CSS This is because of margin: 10px; at #btn

EDIT

If you use onmousedown rather onclick , it will work.

Clarification:

The pseudo-class is activated before onClick. If you change: active from 2px to 20px. You will see this even if you click on the middle of the button.

So, after the new left and top values ​​set with: active, the mouse is no longer on top of the div and cannot register a click ( press and release ).

onmousedown , .

+5

More articles:


All Articles