【转】移动端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

转载于:https://www.cnblogs.com/xiaoxiao2014/p/5009599.html