爲什麼文本在<input>中的位置不同於<span>或<textarea>？

我試圖構建一個僞造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>或<textarea>？

不幸的是，我發現瀏覽器的神奇放置文本不同的<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>用於視覺匹配，這不是需要自動運行的插件的選項。

來源

2011-05-18 stilist

它是基於操作系統如何對齊其在各種控制文本。 – BoltClock 2011-05-18 21:05:23

指定等於元素高度的行高應該可以工作。看到你原來的小提琴的這個叉子，可以這麼說：http://jsfiddle.net/pygPs/。

快速瀏覽器檢查顯示它在IE 9，IE 6以及Firefox，Chrome和Safari的最新Mac版本中正確呈現。我沒有發生任何變化，從原來的鏈接現有CSS的，只是增加了一條線：

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

來源

2011-05-18 21:15:32 Lane

完美 - 謝謝！ – stilist 2011-05-18 21:32:40

沒有問題。我從來沒有得到垂直對齊屬性的工作。我發現我在塊元素上有更好的成功（與內聯元素如跨度）相比，但我仍然不喜歡它。我只是碰到這個頁面，這是一個很好的小問題摘要（它也提示了行高屬性）：http://phrogz.net/css/vertical-align/index.html – Lane 2011-05-18 21:38:47

爲什麼文本在<input>中的位置不同於<span>或<textarea>？

回答

相關問題