<input> tiene relleno de fondo misterioso

Question

Estoy tratando de hacer un estilo bastante preciso en algunos elementos de formulario, y este problema me está causando un gran dolor.

Si intento para eliminar padding, margin, border y outline de un <input> (con display: block) para que el tamaño del campo es puramente determinada por el texto, el campo de entrada termina por tener unos pocos píxeles carnes de más que cualquier otro elemento de nivel de bloque diseñado exactamente de la misma manera. He aquí un ejemplo: http://jsfiddle.net/nottrobin/b9zfa/

<input class="normalised testSubject" value="hello" /> 
<div class="normalised testSubject">hello</div> 

Rendering:

En este ejemplo, el <div> obtiene una altura calculada de 16px mientras que el <input> obtiene una altura calculada de 19px.

Obtengo el mismo comportamiento en Chrome 16, Firefox 9 y Opera 11, por lo que es claro que el motor es independiente.

Puedo solucionar el problema agregando manualmente una altura, pero no quiero hacer eso porque quiero que el diseño permanezca en responsive.

¿Alguien me puede ayudar a entender qué está pasando aquí, y cómo puedo asegurar de manera confiable que el <input> tendrá la misma altura que cualquier elemento de nivel de bloque que lo siga?

Answer 1

La <input> tiene un mínimo de line-height en función del tamaño de la fuente. Establecer ambos elementos en un valor line-height más grande funciona, al igual que la eliminación total de line-height. Pero eso aún no le permite tener alturas menores que el mínimo. La solución para eso es usar el pseudo-elemento first-line y configurarlo en display: inline-block;.

Demostración: http://jsfiddle.net/ThinkingStiff/B7cmQ/

CSS:

.normalised:first-line { 
    display: inline-block;  
} 

Pero esto no explica por qué el <input> está actuando de manera diferente a la <div>. Incluso -webkit-appearance: none; no lo corrigió. Parece que hay algún vudú invisible en las entradas que trata su contenido como inline. inline elementos tienen un mínimo de line-height según el tamaño de fuente, que es el comportamiento que estamos viendo aquí.Es por eso que first-line lo arregla. Parece que está diseñando el elemento "hijo" del <input>.

Aquí hay una demostración que muestra el mínimo line-height en elementos inline. El elemento <div> hace honor a line-height: 7px;. El <span>, aunque su valor calculado muestra 7px;, no lo respeta visualmente.

Demostración: http://jsfiddle.net/ThinkingStiff/zhReb/

Salida:

HTML:

<div id="container"> 
    <div id="div-large">div <br />large</div> 
</div> 
<div id="container"> 
    <div id="div-medium">div <br />med</div> 
</div> 
<div id="container"> 
    <div id="div-small">div <br />small</div> 
</div> 
<div id="container"> 
    <span id="span-large">span <br />large</span> 
</div> 
<div id="container"> 
    <span id="span-medium">span <br />med</span> 
</div> 
<div id="container"> 
    <span id="span-small">span <br />small</span> 
</div> 

CSS:

#container { 
    background-color: lightblue; 
    display: inline-block; 
    height: 200px; 
    vertical-align: top; 
} 

#div-large { 
    line-height: 50px; 
} 

#div-medium { 
    line-height: 20px; 
} 

#div-small { 
    line-height: 7px; 
} 

#span-large { 
    line-height: 50px; 
    vertical-align: top; 
} 

#span-medium { 
    line-height: 20px; 
    vertical-align: top; 
} 

#span-small { 
    line-height: 7px; 
    vertical-align: top; 
} 

Answer 2

¿Estás seguro de que están utilizando exactamente la misma fuente (incluido el tamaño)?

Intente agregar box-sizing: border-box al input.

nunca he tenido este problema a mí mismo, pero yo sólo lo he utilizado como prueba en algún lugar de IE9 ...

Answer 3

Extracción de la line-height parece resolver el problema.

See fiddle. Probado solo en FF tho.

Answer 4

I KN Me tardo meses en llegar a esta pregunta, pero la encontré en una búsqueda de Google y quería agregar una cosa que podría ayudar a aclarar algunas de las otras respuestas con respecto a los elementos <input> en Firefox.

La forma estilo predeterminado en Firefox incluye un poco de CSS incómoda:

input { 
    ... 
    line-height: normal !important; 
    ... 
} 

Esto hace que sea prácticamente imposible que sustituye a la propiedad line-height de cualquier forma de entrada en Firefox. El problema existe desde hace años, y si bien parece obvio para los desarrolladores de FF eliminar la regla !important, deduzco que hay algunos problemas de implementación bajo el capó al hacerlo. Además, aparentemente hay algunos sitios web (incluido YouTube) que confían en el comportamiento de esta regla.

Para más detalles y mucha discusión, vea Mozilla bug #349259. También hay una buena publicación en el blog al 456bereastreet.com, y otra (más antigua) de Eric Meyer al meyerweb.com.