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,左右根据宽度自适应!其 ...
随机推荐
- WIZnet官方网盘
之前使用过 WIZnet 的TCP/IP 解决方案,资源较少, 偶然发现此网盘,不敢独享,访问 请戳此处.
- ubuntu10.04+win7双系统,重装win7后,恢复grub引导菜单以及命令行引导linux
我在我的小Y上安装了ubuntu10.04和win7旗舰版的双系统,采用的是grub引导.今天win7不知道哪儿出了问题,windows update更新一直报错,(当然360也是打不上滴)网上查了很 ...
- 让view 覆盖导航栏
当我们想做一个弹出式菜单时,想将导航栏也一起盖住不显示的话,可以用如下语句实现: UIView* myView = /* 你自定义的view */; UIWindow* currentWindow = ...
- 搞笑世界杯(codevs 1060)
题目描述 Description 随着世界杯小组赛的结束,法国,阿根廷等世界强队都纷纷被淘汰,让人心痛不已. 于是有 人组织了一场搞笑世界杯,将这些被淘汰的强队重新组织起来和世界杯一同比赛.你和你的朋 ...
- class-dump获取iOS私有api
转自:http://blog.csdn.net/sunyuanyang625/article/details/41440167 获取各类iOS私有api 安装工具class-dump 资源地址http ...
- 【转】C语言快速幂取模算法小结
(转自:http://www.jb51.net/article/54947.htm) 本文实例汇总了C语言实现的快速幂取模算法,是比较常见的算法.分享给大家供大家参考之用.具体如下: 首先,所谓的快速 ...
- Mac与iPhone屏幕录制
1. Mac电脑屏幕录制 1.1 文件->新建屏幕录制 1.2 点击红色按钮 1.3 截取需要录制的屏幕部分,点击开始录制 1.4 点击工具栏的停止按钮,停止录制 1.5 然后会 ...
- js函数的几个特殊点
在ECMAScript中,Function(函数)类型实际上是对象.每个函数都是Function类型的实例,而且都与其他引用类型一样具有属性和方法.由于函数是对象,因此函数名实际上也是一个指向函数对象 ...
- 关于android的单位dp与px
原文:Android中dp和px之间进行转换 官方文档:http://developer.android.com/guide/practices/screens_support.html The de ...
- 与你相遇好幸运,Sails.js自定义responses
在 /api/responses/ 新建文件 >serviceDBError.js 自定义的数据库错误 >serviceError.js 自定义的数据错误 >serviceSucc ...