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,左右根据宽度自适应!其 ...
随机推荐
- ACM/ICPC 之 Bellman Ford练习题(ZOJ1791(POJ1613))
这道题稍复杂一些,需要掌握字符串输入的处理+限制了可以行走的时间. ZOJ1791(POJ1613)-Cave Raider //限制行走时间的最短路 //POJ1613-ZOJ1791 //Time ...
- [转][Android]FragmentPagerAdapter与FragmentStatePagerAdapter使用详解与区别
原文链接:http://blog.csdn.net/zhaokaiqiang1992 FragmentPagerAdapter是android-support-v4支持包里面出现的一个新的适配器,继承 ...
- Effective C++ -----条款16:成对使用new和delete时要采取相同形式
如果你在new表达式中使用[],必须在相应的delete表达式中也使用[].如果你在new表达式中不使用[],一定不要在相应的delete表达式中使用[].
- malloc原理和内存碎片
当一个进程发生缺页中断的时候,进程会陷入内核态,执行以下操作: 1.检查要访问的虚拟地址是否合法 2.查找/分配一个物理页 3.填充物理页内容(读取磁盘,或者直接置0,或者啥也不干) 4.建立映射关系 ...
- 对QQ、微信等第三方登录的几个思考
转自:http://www.jianshu.com/p/7f282dfc16fc 今天聊聊注册.登录环节中很常见的第三方登录,如QQ.微信.支付宝.新浪微博等.虽然这些产品的开放平台都提供了标准的接入 ...
- .NET后台如何获取前台HMTL控件的值
很多时候我们需要HTML控件,感觉比服务器控件更加简介,清爽,那么如何获取HMTL控件的值呢,请看下面例子: 前台页面代码: <input id="Text1" type=& ...
- osg四元数设置roll pitch heading角度
roll绕Y轴旋转 pitch绕X轴旋转 heading绕Z轴旋转 单位是弧度,可以使用osg::inDegrees(45)将45角度转换为弧度 定义一个四元数 osg::Quat q( roll,o ...
- 解决sqlite3_key的问题
报错内容显示如下: ld: warning: ignoring file /Users/rowling/Library/Developer/Xcode/DerivedData/zhinengbango ...
- 关闭Eclipse的控制台console自动跳出
一.背景 在eclipse中进行开发,尤其是在后台有项目运行的时候,当有log或者错误需要打印到console中时,控制台就会被自动弹出,恰好这时候你又在编写代码,就会感觉瞬间想杀人,下面我们就来分享 ...
- CSS应用给网页元素的几种方式总结
一.内联式样式表 直接在HTML标签中使用style进行定义样式.如:<p style="color:red;">这里是红色文字</p>. 二.嵌入式样式表 ...