El elemento de entrada (enviar) ocupa espacio adicional en Firefox

Question

Una página web con un enlace, una entrada (enviar) y un lapso. Todos están diseñados para tener el mismo aspecto, en realidad la entrada está diseñada para tener el mismo aspecto que el hipervínculo y el lapso.

Probado usando: Firefox 3.0, 3.6, 4.0, 14.0.1

Por alguna razón, la entrada es un poco más grande entre los demás. Además, el texto de la entrada no está alineado con el texto del enlace y el lapso. Aquí hay una demostración en vivo.

http://jsfiddle.net/LGftW/

Aquí es mi CSS:

a{ 
    text-decoration:none; 
} 

input[type="submit"]{ 
    border:0 none; 
    background:transparent; 
} 

a, input[type="submit"], span{ 
    border:solid 1px green; 
    font-size:64px; 
    font-family:Arial; 
    font-weight:bold; 
    float:left; 
    padding:0; 
    margin:0; 
} 

de marcado:

<a href="#">LINK</a> 
<input type="submit" value="INPUT" /> 
<span>SPAN</span> 

Entonces, ¿cómo puedo hacer que una entrada para que parezca un vínculo común o abarcan? ¿Es extraño el comportamiento del navegador o simplemente me perdí algo de CSS? He estado resolviendo esto por un día.

Editar

parece que el problema se produce sólo en Firefox. IE8-9 y Chrome lo muestran correctamente.

Answer 1

botón Quitar el acolchado en Firefox mediante el uso de input::-moz-focus-inner en tu CSS:

input::-moz-focus-inner /*Remove button padding in FF*/ 
{ 
    border: 0; 
    padding: 0; 
} 

EDITADO: Actualización de demostración Enlace con el código de seguridad.

SEE DEMO en Firefox