在移动端编写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

【转】移动端input输入placeholder垂直不居中的更多相关文章

  1. 移动端input输入placeholder垂直不居中

    在移动端编写input输入框时候,为了输入文字与输入框垂直居中,一般情况下,会将input的line-height的高度等于height.但在移动端输入的时候会发现,虽然输入内容确实是垂直居中了,但是 ...

  2. 解决 placeholder 垂直不居中，偏上的问题

    解决 placeholder 垂直不居中,偏上的问题 安卓浏览器显示placeholder 垂直不居中,而iphone没问题,搜了一下答案,解决方法是把input的line-height去掉就行 参考 ...

  3. ie 下input光标位置垂直不居中问题

    input输入框用一个背景图模拟,设置height和line-height一样的高度,使里面的输入文字能够居中, 在FF下出现的情况是:点击input时,输入光标其实上跟input的height一样高 ...

  4. 移动端input中的placeholder属性垂直

    今天做项目时发现,在手机端用placeholder时,Android手机可以垂直显示:ISO则不能使placeholder垂直;解决办法: .gcddfadf-con-pay-1 input::-we ...

  5. 改变input的placeholder字体颜色

    改变input的placeholder字体颜色,注意哦,只是placeholder的字,用户输入的字不可以 input::-webkit-input-placeholder{ coloc:#000; ...

  6. input 的 placeholder属性在IE8下的兼容处理

    placeholder是input标签的新属性,在使用的时候有两个问题: 1.IE8 下不兼容 处理思路: 如果浏览器不识别placeholder属性,给input添加类名placeholder,模仿 ...

  7. ie8的input的placeholder不显示的解决bug

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  8. Vue 限制input输入 限数字 或 小数点后两位number

    Vue 限制input输入 小数点后两位number <input type="number" @keydown="handleInput2" place ...

  9. 移动端 input 输入框实现自带键盘“搜索“功能并修改X

    主要利用html5的,input[type=search]属性来实现,此时input和type=text外观和功能没啥区别: html代码入下: <form action="" ...

随机推荐

  1. TI CC2541的LED控制

    现在终于进入到蓝牙SPI的环节了, 下面还要研究I2C, 所以第一步, 先点灯, 就是GPIO控制吧. 参考一下LEd的初始化: void HalLedInit (void){#if (HAL_LED ...

  2. NEON在Android中的使用举例【转】

    转自:http://blog.csdn.net/fengbingchun/article/details/37766607 版权声明:本文为博主原创文章,未经博主允许不得转载. 1.  打开Eclip ...

  3. Android消息处理机制(Handler 与Message)---01

    一.handler的使用场景为么会有handler?(部分内容图片摘自http://www.runoob.com/w3cnote/android-tutorial-handler-message.ht ...

  4. JavaScript中统计Textarea字数并提示还能输入的字符

    <span style="font-size:18px;"><script language="javascript"> functio ...

  5. DBLINK的session无法关闭，报异常！

    ------解决方法-------------------------------------------------------- --ALTER SESSION alter session clo ...

  6. struts2，实现Ajax异步通信

    用例需要依赖的jar: struts2-core.jar struts2-convention-plugin.jar,非必须 org.codehaus.jackson.jar,提供json支持 用例代 ...

  7. Hibernate，JPA注解@DynamicInsert和@DynamicUpdate，Hibernate如何插入sysdate

    @DynamicInsert属性:设置为true,设置为true,表示insert对象的时候,生成动态的insert语句,如果这个字段的值是null就不会加入到insert语句当中.默认false. ...

  8. node-webkit 新建实例窗口间通信问题解决办法

    终于弄明白这问题了,只要在js文件里加上段代码,就可解决两窗口间通信问题. var str = { username: User.name, userrole: User.role }; var ne ...

  9. PMO究竟啥样？（3）

    PMO究竟啥样?(3) 继续上一篇,PMO究竟啥样?到这篇,这篇文章就完毕啦. 超卓基地COE,4大典型责任 我们知道全部的公司,它都是要不断地继续改善和优化,包括公司内安排级的项目处理的机制,也需求 ...

  10. 编写一个函数func()，将此函数的输入参数（int型）逆序输出显示，如54321 –> 12345，要求使用递归，并且函数体代码不超过8行

    public class Test{ //中间变量 private String res = "0"; //方法 public int func(int i){ if(i>0 ...