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. uml 推荐文章

    http://blog.csdn.net/zfrong/article/details/4086424 http://www.cnblogs.com/ywqu/archive/2009/12/14/1 ...

  2. mysql的innodb中事务日志ib_logfile

    mysql的innodb中事务日志ib_logfile事务日志或称redo日志,在mysql中默认以ib_logfile0,ib_logfile1名称存在,可以手工修改参数,调节开启几组日志来服务于当 ...

  3. [转] 理解 Thread.Sleep 函数

    原文链接:http://www.cnblogs.com/ILove/archive/2008/04/07/1140419.html 我们可能经常会用到 Thread.Sleep 函数来使线程挂起一段时 ...

  4. filter 简介

    概述 filter() 方法使用指定的函数测试所有元素,并创建一个包含所有通过测试的元素的新数组. 语法 var new_arrary = arr.filter(callback[, thisArg] ...

  5. 前台js分页,自己手写逻辑2

    //设置分页 var pageSize = 10; //设置一次显示多少页 var pageLimit = 5; $(function(){ $.post("rest/rtdbfix/lis ...

  6. bootstrap日期控件在火狐下的模态框中选择时间下拉菜单无效的解决办法

    今天收到程序组提交的一个兼容BUG,在火狐中使用模态框加载日期控件时选择时间下拉菜单没有效果(不能点击),而在谷歌中却是好的, 排错思路:1,在当前页面主层放置一个时间控件,测试通过 2,在ajax加 ...

  7. nginx配置负载

    一.系统优化 1.修改/etc/sysctl.conf,优化tcp连接数 net.ipv4.tcp_fin_timeout = 30 net.ipv4.tcp_keepalive_time = 120 ...

  8. IOS - ARC改为非ARC

    1.project -> Build settings -> Apple LLVM complier 3.0 - Language -> objective-C Automatic ...

  9. C/C++不同文件夹下包含头文件的方法及#include的使用

    转自:http://blog.sina.com.cn/s/blog_6e0693f70100so42.html 本文主要介绍了如何不同文件夹下使用预处理器指示符#include. 假设我们有如下一个工 ...

  10. Mac使用入门

    mac常用快捷键 全屏/退出全屏 ctr+command+F 切换到桌面 fn+f11 输入法切换 ctr+空格 亮度 f1.f2 声音 f11.f12 复制.粘贴 command+c.command ...