在移動端編寫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裏的內容明顯的靠上,嚴重的不美觀。html
在網上查了一些資料,對於原理性的解釋好像基本上沒看到。可是國外的網站對這個屬性給了一個默認的建議,那就是不要設計input的line-height或者設置line-height爲normal,便可。html5
不過,又發現問題了,雖然在手機端正常,可是在pc端看的時候,placeholder仍是有點偏下的感受。強迫症害死人啊。。。那怎麼辦。。。設置line-height:1.5em,或者將em換算成實際的px也能夠。字體
轉:http://www.i5yt.com/?p=187網站