rotate - prefix css

diferencias de altura de entrada en Firefox y Chrome

Question

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

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;
}

Answer 1

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 propia representación para sans-serif , ya que realmente no es una fuente.

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

Answer 2

El problema es esencialmente line-height .

Chrome ve line-height misma manera que ve la height y Firefox no.

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

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

http://jsfiddle.net/e2agj/1/ - La entrada del último ejemplo es la correcta.

Answer 3

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

height: 20px;
padding: 0;

Answer 4

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 línea, la altura y el tamaño de fuente para lograr el aspecto apropiado.

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

Answer 5

Simplemente intente desbordar: oculto en la entrada

Answer 6

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

Answer 7

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