Estoy tratando de hacer un estilo bastante preciso en algunos elementos de formulario, y este problema me está causando un gran dolor.<input> tiene relleno de fondo misterioso
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?
eliminar 'line-height: 1em' de' .normalised' CSS para que sean de la misma altura. Esto haría que 'div' tenga la misma altura que tu campo 'input'. Vea este [violín] modificado (http://jsfiddle.net/uday99/b9zfa/4/) – uday
@Dave: Lo he confirmado con Chrome 17. –
@EvanMulawski gracias. :) – uday