¿Por qué el texto se coloca de manera diferente en <input> que en <span> s o <textarea> s?

Question

Estoy intentando crear un complemento jQuery que simule el atributo HTML5 placeholder (como What is the most accurate way to emulate the "placeholder" attribute in browsers that don't support it natively?). Para hacer esto, inserto un <span> antes de <input> o <textarea> y duplicando el diseño.

Por desgracia, he descubierto que los navegadores ponen mágicamente el texto de forma diferente en <input> s de <span> s o <textarea> s, como se demuestra por http://jsfiddle.net/63zcD/1/ -el texto se centra verticalmente en el <input>, a pesar de que el inspector web dice que el estilo es idéntico a través de los tres. El efecto aparece en Safari, Chrome y Firefox.

trucos que no han funcionado:

• vertical-align: middle;, vertical-align: text-bottom;
• display: inline-block;

la página de inicio de sesión de Twitter falsifica el atributo placeholder, pero consiguen evitar este problema envolviendo la <span> y <input>/<textarea> en un contenedor que contiene <div> y diseño manual del <span> para una coincidencia visual, que no es una opción para un complemento que necesita ejecutarse automáticamente.

Answer 1

La asignación de una altura de línea que sea igual a la altura del elemento debería funcionar. Vea esta horquilla de su violín original, por así decirlo: http://jsfiddle.net/pygPs/.

Una rápida comprobación del navegador mostró que se procesa correctamente en IE 9, IE 6, así como las últimas versiones de Mac de Firefox, Chrome y Safari. No cambié ninguno de los CSS existentes del enlace original, solo agregué una línea:

height: 26px; 
line-height: 26px; /*added this line*/