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,左右根据宽度自适应!其 ...
随机推荐
- 解读Unity中的CG编写Shader系列四(unity中的圆角矩形shader)
转自 http://www.itnose.net/detail/6097625.html 上篇文章中我们掌握了表面剔除和剪裁模式 这篇文章将利用这些知识实现一个简单的,但是又很常用的例子:把一张图片做 ...
- irssi忽略退出,加入消息
IRSSI: IGNORE JOINS, PARTS, QUITS AND NICKS MESSAGES I use IRC on a daily basis and my client of cho ...
- How to raise exceptions in Delphi
uses SysUtils; procedure RaiseMyException; begin raise Exception.Create('Hallo World!'); end;
- [Android]drawable-nodpi文件夹 的作用
把一些不能被拉伸的图片放在 drawable-nodpi 中,此图片将不会被放大,以原大小显示. 看下图: 这两个图片被放到了drawable-nodpi 中 在不同分辨率下的显示大小是一样的,不会被 ...
- Effective C++ -----条款11: 在operator=中处理“自我赋值”
确保当对象自我赋值时operator=有良好行为.其中技术包括比较“来源 对象”和“目标对象”的地址.精心周到的语句顺序.以及copy-and-swap. 确定任何函数如果操作一个以上的对象,而其中多 ...
- 【leetcode】Text Justification(hard) ☆
Given an array of words and a length L, format the text such that each line has exactly L characters ...
- LightOJ 1197 Help Hanzo(区间素数筛选)
E - Help Hanzo Time Limit:2000MS Memory Limit:32768KB 64bit IO Format:%lld & %llu Submit ...
- java中方法参数的一些总结(1)
1.问题说明 在C++中,函数调用时有传值调用和传址调用两种方式,但在Java中只有传值调用一种方式.Java中的方法参数为那几种基本数据类型的情况跟C++中一样,传入的只是变量的拷贝. ...
- PHP安全编程:过滤用户输入
如果你能正确可靠地识别和过滤输入,你的工作就基本完成了.最后一步是使用一个命名约定或其它可以帮助你正确和可靠地区分已过滤和被污染数据的方 法.我推荐一个比较简单的命名约定,因为它可以同时用在面向过程和 ...
- 在cmd窗口中运行php命令
1.首先安装php.我使用的是wamp,里面包含php5.5.12 2.将C:\wamp\bin\php\php5.5.12添加到环境变量Path中 3.在cmd中运行php -v可以查看php版本相 ...