input上下居中问题
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上下居中问题的更多相关文章
- label 和input/textarea居中对齐
设置label和input/textarea的vertical-align: middle;即可实现垂直方向居中对齐.有时候可能会有偏差,设置input的margin-top使看上去居中对齐
- 如何让一个input输入框居中
<div style="text-align:center;vertical-align:middel;"><input type="text" ...
- 设置input 内容居中显示 .
text-align:center 水平居中显示 <style type="text/css"> input.text{text-align:center;paddi ...
- <input>内容居中、去框、不可编辑等
<input class="i" type="text" value="Sin(x)" readonly="readonly ...
- ie浏览器下input和select的上下居中问题!!!!
在Google浏览器下的input和select标签里面的文字是根据它的高度自适应上下居中的,而ie浏览器下的input和select里面的文字就不会根据高度自适应上下居中,跟大家分享一下我的解决方法 ...
- 关于label和input对齐的那些是秦
input文本和label对齐 默认状态下,也就是下面这样, 文字和input是居中的. <div> <label>我是中国人</label> <input ...
- 关于label和input对齐的那些事
input文本和label对齐 默认状态下,也就是下面这样, 文字和input是居中的. <div> <label>我是中国人</label> <input ...
- 自定义表单样式之checkbox和radio
1,起因 最近在工作中要实现自定义式的radio样式,而我们通常使用的时默认的样式,因为自己实在想不到解决的方法,于是开始搜索,最终看到了不错的解决办法,可以完美解决我们遇到的问题. 2,原理 大家都 ...
- css中margin:0 auto没作用
很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其 ...
随机推荐
- MySQL字符集转换引发插入乱码问题
根据http://www.cnblogs.com/cchust/p/4601536.html进行验证测试 问题背景 在mysql上面执行一条普通的insert语句,结果报错: Incorrect st ...
- Django~学习计划
20160302 Excel,PDF 处理 GeoDjango学习:GIS编程,百度地图 Javascript 邮件系统 图像处理
- SQL删除约束
)禁止所有表约束的SQL select 'alter table '+name+' nocheck constraint all' from sysobjects where type='U' )删除 ...
- Please see the 'svn upgrade' command
svn: E155036: Please see the 'svn upgrade' command svn: E155036: Working copy '/home/easwy/dev' is t ...
- 【python升级录】--列表,元组
本节内容 字符串格式化输出 数据运算 for循环 while循环 列表 元组 [字符串格式化输出] 占位符 %s—string,%d—digital,%f —float # __author:&quo ...
- 词频统计_输入到文件_update
/* 输入文件见337.in.txt 输出文件见338.out.txt */ #include <iostream> #include <cctype> #include &l ...
- 项目配置laungchImage
- 手写代码自动实现自动布局,即Auto Layout的使用
手写代码自动实现自动布局,即Auto Layout的使用,有需要的朋友可以参考下. 这里要注意几点: 对子视图的约束,若是基于父视图,要通过父视图去添加约束. 对子视图进行自动布局调整,首先对UIVi ...
- db2 bind on luw
https://www.ibm.com/support/knowledgecenter/SSEPGG_10.5.0/com.ibm.db2.luw.apdv.embed.doc/doc/c000556 ...
- hdu 1249 三角形
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1249 part=3*s*(s-1)+2 #include<stdio.h> #includ ...