为什么文本在<input>中的位置不同于<span>或<textarea>？

Question

我试图构建一个伪造HTML5 placeholder属性（如What is the most accurate way to emulate the "placeholder" attribute in browsers that don't support it natively?）的jQuery插件。为此，我在适当的<input>或<textarea>之前插入<span>并复制样式。

不幸的是，我发现浏览器的神奇放置文本不同的<input>总比<span> S或<textarea> S，由http://jsfiddle.net/63zcD/1/ -the文本在<input>垂直居中的证明，尽管网络督察说，造型是相同的在所有三个。效果出现在Safari，Chrome和Firefox中。

技巧，都没有奏效：

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

Twitter的登录页面假货placeholder属性，但它们通过包装<span>和<input>解决这个问题/ <textarea>在一个包含<div>和手动造型<span>用于视觉匹配，这不是需要自动运行的插件的选项。

Answer 1

指定等于元素高度的行高应该可以工作。看到你原来的小提琴的这个叉子，可以这么说：http://jsfiddle.net/pygPs/。

快速浏览器检查显示它在IE 9，IE 6以及Firefox，Chrome和Safari的最新Mac版本中正确呈现。我没有发生任何变化，从原来的链接现有CSS的，只是增加了一条线：

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