【轉】移動端input輸入placeholder垂直不居中

在移動端編寫input輸入框時候，爲了輸入文字與輸入框垂直居中，通常狀況下，會將input的line-height的高度等於height。但在移動端輸入的時候會發現，雖然輸入內容確實是垂直居中了，可是光標的位置是靠上的，致使感官上的不美觀。因而對input設置的時候，首先肯定字體的大小如font-size:16px，其次咱們肯定設計稿裏input的高度，如input高度爲40px，那麼此時的代碼應該是這樣的：input{height:16px;line-height:16px;padding:12px 0;border:1px solid #ddd;}，這樣的代碼在移動端不管是視覺仍是輸入時都是符合要求的。但是html5出來一個新屬性，那就是placeholder，不得不說這個屬性的出現解救了以往繁瑣的js實現效果，可是，當你給input設置了placeholder後，在pc端看，好像是偏上了那麼一點點，好像也不是很影響使用。可是在手機端瀏覽後，就會發現雖然輸入文字能夠垂直居中，placeholder裏的內容明顯的靠上，嚴重的不美觀。

在網上查了一些資料，對於原理性的解釋好像基本上沒看到。可是國外的網站對這個屬性給了一個默認的建議，那就是不要設計input的line-height或者設置line-height爲normal，便可。

不過，又發現問題了，雖然在手機端正常，可是在pc端看的時候，placeholder仍是有點偏下的感受。強迫症害死人啊。。。那怎麼辦。。。設置line-height：1.5em，或者將em換算成實際的px也能夠。

轉：http://www.i5yt.com/?p=187