Complemento de Firefox add 2px en un botón de envío

Question

Hola, parece que tengo algunos problemas con Firefox agregando 2 píxeles adicionales de relleno en un botón de envío. He probado esto en Chrome e IE9 y ambos navegadores muestran el código correcto, Firefox parece a ser la adición de 2 píxeles de relleno en la parte inferior del botón de enviar con el fondo clave en la corner.Here superior derecha es el sitio web:

www.thanathos.host22.com

Este es el código para el sitio:

<form method="post" action="index.html"> 
       <input type="text" value="Username"/> 
       <input type="text" value="Password"/> 
       <input type="submit" id="submit" value=""/> 
       <img src="img/header/key.png" alt="" id="key"/> 
     </form> 

    header section form input{ 
     color:#b3aaaa; 
     border:1px solid #cccccc; 
     float: left; 
     padding:5px 8px; 
     margin-left: 6px; 
    } 

¿Cómo puedo corregir esto?

Si no hay solución para esto ¿alguien puede darme una solución en la que el texto de entrada es igual al envío de entrada y el texto de entrada es el centro desde la parte superior a la inferior?

EDIT: He comprobado esto en otro equipo y parece que Firefox hace esto correctamente he encontrado con este tipo de problema antes de que la misma versión del navegador muestra una página web un poco diferente en equipos diferentes . Última vez sucedió algo similar en Chrome. Nunca pude resolver este problema.

¿Alguien sabe por qué el mismo navegador podría representar una página de manera diferente en diferentes computadoras con el mismo tamaño de pantalla y resolución?

Answer 1

Estaba teniendo un problema como este.Entonces, encontré este CSS cosita que resolvió el problema:

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

Esta solución se da en un comentario en esta entrada del blog:

Bulletproof CSS input button heights

Como dice el mensaje: esto sucede porque Firefox (Usuario Agente) propio CSS estilo utiliza !important y todo lo que uno intente hacer para anular la propiedad CSS no se aplicará.

Answer 2

** dejo esto aquí ya que creo que es útil anywhoo .. **

en cualquiera de los casos intente acceder simplemente el botón y jugar con el css para ello:

input[type="submit"] { 
    padding-bottom: 3px; 
} 

EDITAR

Bien, hay un problema con su solución, ya que está posicionando la imagen sobre el botón, hará que sea más difícil hacer clic en el botón Enviar. Si coloca el mouse sobre la tecla, verá que no cambia a un puntero = no se puede hacer clic.

Le sugiero que elimine la etiqueta de imagen y, en su lugar, la use como fondo en su botón de envío. Algo como esto:

input[type="submit"] { 
    padding-bottom: 3px; 
    background: url(path-to-image); 
    border: none; 
    height: "img-height"; 
    width: "img-width"; 
} 

Si el tamaño de la imagen es correcta, ya que también parecen tener algún tipo de formación en el botón de envío allready. Voy a hacer una imagen que tenga el tamaño correcto que contenga tanto el fondo como la imagen clave (espero que esta última frase haga notar).

Otro posible problema podría ser que no tiene texto en el botón, sin embargo, el botón debería heredar el lineheight/font-size de versiones anteriores del css y, por lo tanto, podría expandir el botón de enviar más. Intente agregar algo como font-size: 1px o algo así.