puerta corredera Elemento de botón se rompió en Firefox solamente

Question

Estoy tratando de hacer un botón de puerta deslizante que se puede utilizar en general todo funciona bien excepto el Firefox. el elemento span en el botón siempre baja 2px en FF.

aquí es ejemplo

http://jsbin.com/orami3/4

Answer 1

Prueba esto:

button::-moz-focus-inner { 
    border: 0; 
    padding: 0; 
} 

(Mente que los dos puntos (:) se duplica, sí.)

El relleno adicional en este caso es causado por un error oscuro de Firefox.

(Después de haber encontrado este error a mí mismo que he encontrado la solución at this blog, a través de una búsqueda en Google.)

Answer 2

Bueno, no sé por qué sucede esto, pero hay una cierta extrañeza aquí. También afecta a Safari, y es ligeramente diferente. Si agrega un margen negativo al intervalo del botón, moverá la mitad de la distancia en Firefox que en Safari. Entonces, la solución parece compensar la imagen de fondo. Aquí es una manera de entrar ilegalmente en él:

/*grey button hacks non-IE*/ 
button.grey span{ 
    background-position: 0 -1px; 
} 
button.grey:hover span{ 
    background-position: 0 -36px;  
} 
button.grey:active span{ 
    background-position: 0 -71px;  
} 

/* IE workaround. The \9 makes non-IE ignore these styles*/ 
button.grey span{ 
    background-position: 0 0px\9; 
} 
button.grey:hover span{ 
    background-position: 0 -35px\9;  
} 
button.grey:active span{ 
    background-position: 0 -70px\9;  
} 

Ejemplo aquí: http://jsbin.com/orami3/9