文章出處
文章列表
在移動端編寫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
文章列表
全站熱搜
留言列表
