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.