altura no uniforme de los elementos de entrada de texto entre Firefox y WebKit

Question

bien, me doy cuenta de que esto es una especie de eterna pregunta, pero aquí va:

Tengo una sola entrada de texto,

<input type="text" name="whatever" /> 

y he especificado su font-family, font-size y padding. Sin embargo, incluso en la misma máquina (mi Mac, digamos), la entrada tiene una altura diferente en Firefox (3.6) que en Chrome o Safari. Específicamente, Firefox agrega un poco más de relleno debajo del texto.

Y no, al especificar height en píxeles tampoco se logra consistencia.

¿Hay alguna forma de lograr la consistencia de la altura de entrada de texto entre los navegadores basados ​​en Gecko y WebKit (y mucho menos en IE y Opera) sin recurrir a JavaScript? Y si debo usar JavaScript, ¿alguien ya diseñó un plugin jQuery o algo para hacer esto fácilmente?

Actualización: Esto es lo que no debe hacer. El complemento jqTransform le permite suavizar los elementos y promete que se verán iguales en todos los navegadores. Así es como se ve la entrada de demostración en Chrome 5 en mi Mac:

y así es como la misma entrada se ve en Firefox 3.6.4:

no he alterado éstos capturas de pantalla de cualquier manera, solo los recortaron. Ahora, mi primera reacción es: "Uf, no quiero apoyar Firefox". Pero actualmente hay más usuarios de Firefox que los usuarios de Safari y Chrome combinados, así que esa no es una opción.

Alguien, por favor ayuda! Solo quiero que mis formularios se vean iguales en modernos, que cumplen con los estándares navegadores! Y por "parece lo mismo", no estoy hablando del outline en la selección ni nada por el estilo; ¡Solo estoy hablando de tener el mismo ancho, alto y colocación de texto!

Answer 1

bien, he aquí una "solución" que trabajé a cabo si realmente quiere <input type="text"> elementos que se ven exactamente lo mismo en las versiones actuales de Safari, Chrome y Firefox. Tenga en cuenta que no he probado esto en Opera o IE, o en sistemas operativos que no sean Mac OS; Estoy seguro de que se necesitarían hacks adicionales.

simplemente definir un <div> proporcionar los antecedentes para la entrada, y dar a la entrada en sí las propiedades background: none, border: 0, etc. En otras palabras, la entrada está flotando texto. A continuación, coloco la entrada sobre el fondo utilizando la posición relativa (específicamente, estableciendo la entrada top). Eso me deja libre para ajustarlo a los diferentes navegadores.En concreto, me encontré con que el texto de entrada fue de 1 píxel superior en los navegadores basados ​​en WebKit que en Firefox, por lo que añade la línea

if ($.browser.webkit) { $input.css('marginTop', 1); } 

Ahora, finalmente, la entrada se ve exactamente lo mismo entre WebKit y Firefox. Es un truco, sí, pero funciona.

Answer 2

¿Te ayuda esta otra pregunta: Firefox 3.6 and CSS difference from previous versions of Firefox 3.5 and back??

Por lo tanto, ¿ves alguna diferencia entre fx 3.6 y Fx3.5-?

Answer 3

if ($ .browser.webkit) {$ ("div jqTransformInputInner de entrada. ") CSS (" padding-top", "10px.");}