He estado usando algunos botones por un tiempo que tienen un efecto de depresión al hacer clic con la posición relativa y una parte superior: 1px en la pseudo-clase: activa.

Tuve problemas con los eventos de clics que no se activaron y resultó que los eventos de ratón y mouseup no se activaron en el mismo elemento. Hice un poco de violín para asegurarme de que el elemento más interno cubría todo el botón y descubrí que el problema seguía sin resolverse.

Si hago clic justo en la parte superior del texto, el enlace salta hacia abajo (disparando el evento del ratón) y luego retrocede (disparando el evento del mouseup), pero el clic no se produce. Si hago clic bien en el medio del texto o lejos del texto, todo está bien.

Lo único que se me ocurre aquí es que el evento mousedown se está activando en textNode y el mouseup se está activando en el elemento delimitador, ya que este no está más bajo el cursor. Capturar los objetos del evento y mirar los objetivos con firebug indica que este no es el caso, pero realmente no puedo pensar en otra explicación. Al leer un poco, puedo encontrar alguna mención de eventos que se activan en TextNodes en Safari, pero nada sobre esta falta de coincidencia.

El siguiente fragmento de código debería permitirle replicar el problema. Recuerde, debe hacer clic derecho en la parte superior del texto, o un píxel o dos arriba, y este problema solo ocurre con una fila de píxeles:

<style>
a.button-test {
 display: inline-block;
 padding: 20px;
 background: red;
}
.button-test:active {
 position: relative;
 top: 1px;
}
</style>
<a class="button-test" href="#">Clickedy click</a>

No parece tener efecto aquí el jugar con el CSS, no usar el bloque en línea, aumentar la altura de la línea en lugar del relleno, etc. He probado muchas combinaciones. La mayoría de mis pruebas se realizaron en Firefox para poder vincularme a los eventos y grabar lo que sucede a través de FireBug, pero también encuentro este problema en otros navegadores.

¿Alguien tiene alguna inspiración que pueda ofrecer sobre esto además de perder el salto activo? Realmente me gustaría mantener este efecto si puedo.

Muchas gracias,

Dom (sin juego de palabras)