diferencias de altura de entrada en Firefox y Chrome

Por qué la altura en Chrome es más grande que la entrada de Firefox

Vea el ejemplo aquí http://jsfiddle.net/jitendravyas/89Msh/1/

select, input, textarea, button { font: 99% sans-serif; } input, select { vertical-align: middle; } body, select, input, textarea { color: #444444; } button, input, select, textarea { margin: 0; } input, textarea { font-family: inherit; line-height: 1.5; } input { border: 0 none; font-size: 32px; line-height: 1.1; margin-right: 29px; padding: 3px 3px 0; width: 206px; border-radius: 7px; } 

El problema es esencialmente line-height .

Chrome ve line-height manera similar a la height y Firefox no.

Agregar altura a la entrada debería resolver el problema, aunque debe tener cuidado de que coincidan la line-height y la height .

Por ejemplo: height: 20px; line-height: 20px; height: 20px; line-height: 20px; .

http://jsfiddle.net/e2agj/1/ – El último ejemplo de entrada es el correcto.

Usualmente uso padding lugar de altura para empujar la altura total de la entrada. Al hacerlo, no tengo que pelear con las diferentes interpretaciones de Chrome y Firefox.

Tuve el mismo problema y tuve que combinar line-height Y el padding para que las cosas funcionen.

Simplemente intente el desbordamiento: oculto en la entrada

Creo que tiene que ver con la forma en que diseñó la font para la input .

 select, input, textarea, button { font: 99% sans-serif; } 

Cada navegador tiene su propio renderizado para sans-serif , ya que realmente no es una fuente.

Por lo tanto, sin un conjunto de fonts específico, podría esperar algunas incoherencias.

Esto debería funcionar en Chrome y Firefox en elementos seleccionados:

 height: 20px; padding: 0; 

Había atravesado el mismo problema de altura de línea de entrada en los navegadores Firefox , Chrome y Opera . Así que combiné la altura de la línea, la altura y el tamaño de la fuente para obtener el aspecto apropiado.

 input { line-height: 45px; height: 45px; font-size: 45px; }