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. Android 程序中得到root activity的引用

    今天写anroid时,想获得一个root activity的引用. ios中这个很简单, [UIApplication sharedApplication].keyWindow 得到window对象, ...

  2. repeater 相关问题

    1.如果添加控件会显示代码有问题,把双引号(“)改为单引号(‘)就可以了

  3. 项目管理工具~SVN

    SVN 定期更新:每周五,周一早上 目录完备: 需求文档     设计文档     数据字典     测试报告     代码备份     周报月报                           ...

  4. codeforces Good Bye 2015 B. New Year and Old Property

    题目链接:http://codeforces.com/problemset/problem/611/B 题目意思:就是在 [a, b] 这个范围内(1 ≤ a ≤ b ≤ 10^18)统计出符合二进制 ...

  5. 自定义View和ViewGroup

    为了扫除学习中的盲点,尽可能多的覆盖Android知识的边边角角,决定对自定义View做一个稍微全面一点的使用方法总结,在内容上面并没有什么独特的地方,其他大神们的博客上面基本上都有讲这方面的内容,如 ...

  6. FTL标签

    <#if blockObject ??> <#else> </if>判断对象是否存在 <#if componentid ?? &&compon ...

  7. c语言中的浮点数

    一.浮点数常量(小数) 0.11L, 0.0f ,0.0,1.88,2.5f ,0.188E1 E3表示103        比如 1.88E 3=1.88*1000=1880.0f E-3表示10- ...

  8. Codeforces Round #324 (Div. 2) C (二分)

    题目链接:http://codeforces.com/contest/734/problem/C 题意: 玩一个游戏,一开始升一级需要t秒时间,现在有a, b两种魔法,两种魔法分别有m1, m2种效果 ...

  9. nyoj1007(euler 函数)

    euler(x)公式能计算小于等于x的并且和x互质的数的个数: 我们再看一下如何求小于等于n的和n互质的数的和, 我们用sum(n)表示: 若gcd(x, a)=1,则有gcd(x, x-a)=1: ...

  10. 对于spark以及hadoop的几个疑问(转)

    Hadoop是啥?spark是啥? spark能完全取代Hadoop吗? Hadoop和Spark属于哪种计算计算模型(实时计算.离线计算)? 学习Hadoop和spark,哪门语言好? 哪里能找到比 ...