Pequeño espacio muerto en un botón div en cromo

Question

No puedo explicar esto. Tengo un div que es un botón. Uso la clase activa de psuedo y posición: relativa; para moverlo ligeramente hacia abajo y hacia la derecha cuando se hace clic, para darle una animación. Por alguna razón, hay un pequeño espacio muerto en este botón en Chrome a mitad de camino entre el texto y el borde del botón. La clase psuedo todavía se activa pero el Javascript en el botón no funciona. Si elimino la posición relativa, el problema desaparece. Esto también ocurre en Firefox, pero el espacio muerto en Firefox está en el mismo borde donde el botón se mueve, lo que tiene sentido pero también necesita ser reparado.

he creado un jsFiddle para mostrar el problema: http://jsfiddle.net/dillydadally/CUHA7/6/

Alguna idea de por qué ocurre esto? ¿Hay alguna forma de arreglarlo?

Answer 1

CSS. Es por el margen : 10px; en #btn

EDITAR

Si utiliza onMouseDown en lugar onclick que va a funcionar.

Explicando:

El seudo clase está siendo activar antes de la onClick. Si cambia los valores de: active de 2px a 20px. Verá que esto sucede incluso si hace clic en el medio del botón.

Así que después de los nuevos valores de la izquierda y de arriba establecidos por el activo, el ratón no es en la parte superior de las div más y no se puede registrar el clic (presione y libere).

Pero onmousedown todavía se activa porque no depende de la liberación del botón del mouse.