在移动端编写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. android 常用命令

    1.查看当前手机界面的 Activity   dumpsys | grep "mFocusedActivity" 查看任务栈 dumpsys | grep "Hist&q ...

  2. grep、egrep、fgrep

    grep: global search regular expression and printing

  3. maven在windows环境下加载settings.xml文件

    今天发现maven在windows环境下加载的settings.xml文件是c:下的,就算修改conf下的settings.xml里的<localRepository>给他明确指向也没用.

  4. java.lang.VerifyError异常

    以前遇到过java.lang.VerifyError 原因是jar包冲突 tomcat6自带jsp.jar.servlet.jar所以项目中不用引入 tomcat5不带jsp.jar.servlet. ...

  5. SIM卡应用-OPN，PLMN，SPN

    SIM卡应用 移动运营商已经将SIM卡用於很多不同的应用,下面列出了其中最主要的应 用∶ ·漫游应用∶确保手机可以在漫游之後选择缺省的运营商网络.一个SIM应用是可以在手机漫游到某个合作夥伴运营商网络 ...

  6. c#作业

    string a = this.textBox1.Text; // string [] b=a.Split("\r\n".ToCharArray(),StringSplitOpti ...

  7. 验证码识别--type7

    验证码识别--type7 一.干扰分析 有黑色边框,然后点干扰,线干扰 去边框 去点干扰 变成这样的结果,方便运算吗?也可以多种方式联合起来运算的.我相信在很多情况下,都可能会遇到类似的结果.我们人类 ...

  8. java提高篇---HashTable

    在java中与有两个类都提供了一个多种用途的hashTable机制,他们都可以将可以key和value结合起来构成键值对通过put(key,value)方法保存起来,然后通过get(key)方法获取相 ...

  9. Mysql-学习笔记（==》触发器 十一）

    -------触发器-------- USE db;SELECT FROM sss; CREATE TABLE sssbak LIKE sss;SHOW CREATE TABLE sss;SHOW C ...

  10. dubbo源码之三——dubbo重构

    dubbo版本:2.5.4 转自:http://javatar.iteye.com/blog/1041832