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课件和源代码

    ppt.rar 代码.rar 也可以自己从这里下载http://pan.baidu.com/share/link?shareid=1287391506&uk=2634355140

  2. 14. javacript高级程序设计-表单

    1. 表单脚本 1.1 基础知识 <from>元素表示表单: l acceptCharset:服务器能处理的字符集 l action:接受请求的URL l elements:表单中所有控件 ...

  3. Python 开发轻量级爬虫01

    Python 开发轻量级爬虫 (imooc总结01--课程目标) 课程目标:掌握开发轻量级爬虫 为什么说是轻量级的呢?因为一个复杂的爬虫需要考虑的问题场景非常多,比如有些网页需要用户登录了以后才能够访 ...

  4. STL_fill()用法

    以前很多次会给某个区间赋值,今天才知道有个函数可以满足这个功能. void fill (ForwardIterator first, ForwardIterator last, const T& ...

  5. VC++ 模块与资源分离

    在一些开发过程中,需要模块支持中英文语言切换,比较好的实现方式是从模块中将资源分离出来,做成中英文两个资源dll,根据需要加载不同的dll从而实现切换不同的语言显示. 新建一个资源dll文件,选择Wi ...

  6. DB2 SQLCODE 大全

    DB2错误信息sqlcode sqlstate 说明 000 00000 SQL语句成功完成 01xxx SQL语句成功完成,但是有警告 +012 01545 未限定的列名被解释为一个有相互关系的引用 ...

  7. 【leetcode】Factorial Trailing Zeroes(easy)

    Given an integer n, return the number of trailing zeroes in n!. Note: Your solution should be in log ...

  8. 实现Asp.Net Mvc4多级Views目录

    建立自己MyViewEngine类让他继承RazorViewEngine,之后在构造函数里面写入设置视图位置格式代码如下: public class MyViewEngine : RazorViewE ...

  9. JS判断是否为IE浏览器 包含了IE11

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...

  10. NYOJ题目768移位密码

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtIAAAJqCAIAAACJkTDlAAAgAElEQVR4nO3du3Ljvpa34b4J574Qx7