IE:不管该行有没有文字,光标高度与font-size一致。
FF:该行有文字时,光标高度与font-size一致。该行无文字时,光标高度与input的height一致。
Chrome:该行无文字时,光标高度与line-height一致;该行有文字时,光标高度从input顶部到文字底部(这两种情况都是在有设定line-height的时候),如果没有line-height,则是与font-size一致。

故而,在设置input高度的时候,尽量用padding使其上下居中,可以避免兼容性问题,

input,textarea{font-size:1rem;height:1rem;padding:2rem 0;}

注意:input是属于inline-block的标签,所以有高度,高度要和font-size的值一致;不用给line-height;

line-height的兼容问题不太好解决,容器高度越小,显示效果的差距越明显。稍微大一点的高度,最好把line-height设置为高度+1px,两个平台显示都还不错。

input上下居中问题的更多相关文章

  1. label 和input/textarea居中对齐

    设置label和input/textarea的vertical-align: middle;即可实现垂直方向居中对齐.有时候可能会有偏差,设置input的margin-top使看上去居中对齐

  2. 如何让一个input输入框居中

    <div style="text-align:center;vertical-align:middel;"><input type="text" ...

  3. 设置input 内容居中显示 .

    text-align:center  水平居中显示 <style type="text/css"> input.text{text-align:center;paddi ...

  4. <input>内容居中、去框、不可编辑等

    <input class="i" type="text" value="Sin(x)" readonly="readonly ...

  5. ie浏览器下input和select的上下居中问题!!!!

    在Google浏览器下的input和select标签里面的文字是根据它的高度自适应上下居中的,而ie浏览器下的input和select里面的文字就不会根据高度自适应上下居中,跟大家分享一下我的解决方法 ...

  6. 关于label和input对齐的那些是秦

    input文本和label对齐 默认状态下,也就是下面这样, 文字和input是居中的. <div> <label>我是中国人</label> <input ...

  7. 关于label和input对齐的那些事

    input文本和label对齐 默认状态下,也就是下面这样, 文字和input是居中的. <div> <label>我是中国人</label> <input ...

  8. 自定义表单样式之checkbox和radio

    1,起因 最近在工作中要实现自定义式的radio样式,而我们通常使用的时默认的样式,因为自己实在想不到解决的方法,于是开始搜索,最终看到了不错的解决办法,可以完美解决我们遇到的问题. 2,原理 大家都 ...

  9. css中margin:0 auto没作用

    很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其 ...

随机推荐

  1. 安装m2crypto报错swig error : Unrecognized option -builtin

    M2Crypto 是最完整的为 Python 包装 OpenSSL 的 RSA,DSA,DH,EC,HMACs,消息摘要,对称密码算法(包括AES)的一个库工具.而自从 M2Crypto 升级到版本 ...

  2. Effective C++ -----条款40:明智而审慎地使用多重继承

    多重继承比单一继承复杂.它可能导致新的歧义性,以及对virtual继承的需要. virtual继承会增加大小.速度.初始化(及赋值)复杂度等等成本.如果virtual base classes不带任何 ...

  3. Greedy:Bound Found(POJ 2566)

       神奇密码 题目大意:就是给你一个数组,要你找出连续的数的绝对值的和最接近t的那一串,并且要找出数组的上界和下界的下标,并显示他们的和 因为这一题的数有正有负,所以必须要先把和求出来,然后排序,然 ...

  4. spfa(模板)

    spfa作为图论中的常用算法,深受各类出题人和各位OIer的喜爱: so,为了给大众创造福利,宝宝在此奉上spfa大发的思路和模板:以感谢社会, 感谢CCF,感谢CCTV, 感谢我的老师,感谢同学们, ...

  5. C# 操作IIS方法集合

    如果在win8,win7情况下报错:未知错误(0x80005000) 见http://blog.csdn.net/ts1030746080/article/details/8741399 using ...

  6. ubuntu下deb包的安装方法

    ubuntu下deb包的安装方法 简介 deb是debian linus的安装格式,跟red hat的rpm非常相似,最基本的安装命令是:dpkg -i file.deb dpkg 是Debian P ...

  7. 解决win10无法完成更新 正在撤销更改

    删除Windows 更新缓存文件按Windows+X,选择“命令提示符(管理员)”:输入:net stop wuauserv,回车(此处会提醒服务停止):输入: %windir%\SoftwareDi ...

  8. 5.1 stack,queue以及priority_queue

    *:stack 使用要包含头文件stack,栈是一种先进后出的元素序列,删除和访问只能对栈顶的元素(最后一个添加的元素)进行,并且添加元素只能添加到栈顶.栈内的元素不能访问,要想访问先要删除其上方的所 ...

  9. redis 列出所有的键

    > KEYS * (empty list or set)

  10. linux中who命令显示的tty、pts和(:0)(:0.0)是什么意思

    http://blog.csdn.net/cwj_beyond/article/details/6987345 http://unix.stackexchange.com/questions/7217 ...