为什么 <input> 中的文本与 <span> 或 <textarea> 中的文本放置方式不同？答案

【问题标题】：Why is text placed differently in <input>s than <span>s or <textarea>s?为什么 <input> 中的文本与 <span> 或 <textarea> 中的文本放置方式不同？
【发布时间】：2011-08-28 09:41:17
【问题描述】：

我正在尝试构建一个伪造 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>s 中，而不是<span>s 或<textarea>s，正如http://jsfiddle.net/63zcD/1/ 所展示的那样——文本在<input> 中垂直居中，尽管 Web Inspector 说这三个的样式是相同的。效果出现在 Safari、Chrome 和 Firefox 中。

没有奏效的技巧：

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

Twitter 的登录页面伪造了placeholder 属性，但他们通过将<span> 和<input>/<textarea> 包装在包含<div> 并手动设置<span> 的样式以进行视觉匹配来解决此问题，对于需要自动运行的插件来说，这不是一个选项。

【问题讨论】：

它基于操作系统如何在各种控件中对齐其文本。

标签： html css

【解决方案1】：

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

快速浏览器检查显示它在 IE 9、IE 6 以及最新的 Mac 版本的 Firefox、Chrome 和 Safari 中正确呈现。我没有更改原始链接中的任何现有 CSS，只是添加了一行：

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

【讨论】：

没有问题。我从来没有让垂直对齐属性工作。我发现我在块元素上取得了更好的成功（与像跨度这样的内联元素相反），但我仍然不喜欢它。我刚刚碰到这个页面，这是一个很好的问题小总结（它也暗示了 line-height 属性）：phrogz.net/css/vertical-align/index.html