input光标大小

最近在做项目忘记密码页面时,input光标大小需要统一。同时也需要兼容ie8浏览器。

总结如下:

IE:不管该行有没有文字,光标高度与font-size一致。

FF:该行有文字时,光标高度与font-size一致。该行无文字时,光标高度与input的height一致。

Chrome:该行无文字时,光标高度与line-height一致;该行有文字时,光标高度从input顶部到文字底部(这两种情况都是在有设定line-height的时候),如果没有line-height,则是与font-size一致。

解决的方案:

给input的height设定一个较小的高度,然后用padding去填充,基本上可以解决所有浏览器的问题

input{
height: 16px;
padding: 4px 0px;
font-size: 12px;
}

时间: 2024-08-13 13:07:22

input光标大小的相关文章

input光标位置

兼容谷歌火狐-input光标位置 input框在没有添加任何效果的情况下,输入文字后光标始终在最后的位置,谷歌||火狐效果一样 但是在给input加入点击事件后 谷歌:input框插入文字后,光标会自动到最后位置 火狐:input框插入文字后,光标在插入文字的后面 兼容:光标在文字的最后面 function moveEnd(obj){ obj.focus(); var len = obj.value.length; if (document.selection) { var sel = obj.

input 光标在 chrome下不兼容 解决方案

input 光标在 chrome下不兼容 解决方案 height: 52px; line-height: normal; line-height:52px\9 .list li input[type=text] { width: 304px; height: 52px; line-height: normal; line-height: 52px\9; border: none; color: #FFFFFF; background: url(../images/txt-bg.png) no-r

IOS中input光标跑偏问题的解决方法

ios端兼容input光标高度处理 在最近的项目中遇到一个问题,input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上 当点击输入的时候,光标的高度和父盒子的高度一样.造成的原因就是给父盒子添加了height和line-height 当点击输入的时候,光标的高度就自动和父盒子的高度一样了.(谷歌浏览器的设计原则,还有一种可能就 是当没有内容的时候光标的高度等于input的line-height的值,当有内容时,光标从input的顶端到文字 的底部). 解决办法:去掉父盒子的高度heig

关于调整input里面的输入光标大小

以前在项目里碰到过一个问题 input输入框用一个背景图模拟,设置height和line-height一样的高度,使里面的输入文字能够居中, 在FF下出现的情况是:点击input时,输入光标其实上跟input的height一样高,但当开始输入文字时,光标又变得跟文字一样高, chrome下光标跟input的height一样高, 而IE下光标跟文字的大小一致. 一直没弄明白为什么这样子,今天听罗浮宫里的同学一讨论,才知道原因所在. 初步结论如下: IE:不管该行有没有文字,光标高度与font-si

input输入框中的光标大小显示不一致

ie7中和chrome的非常明显 先看看问题产生的原因:chrome浏览器对光标高度的设置原则为,当没有内容的时候光标的高度=input的line-height的值,当有内容时,光标从input的顶端到文字的底部. OK,既然知道了原因,我们就相应才去一些措施.尝试了两种方法去做:. 方法1:将line-height的值设置为跟字体大小一致:如果高度达不到,用padding去撑: 方法2:对chrome不设置line-height,它会自动文字居中,对ie进行hack设置line-height的

Safari input 光标不居中解决方案

昨天在iPhone的Safari中发现了这个问题,line-height 属性不能使input输入框中的光标垂直居中,总会有偏移量.查找资料之后发现要换一写法. height= padding + font-size;  这样通过padding方式达到的居中效果没有问题.如果高度是30px,字体大小是16px,设置line-height和字体大小相同,计算得上下内边距是7px. input{ padding:7px 0; height: 30px; font-size: 16px; line-h

让input光标一直在最右边

有时候,我们需要使的input输入框的在点击时光标一直居右边 例如:移动端,用手指去点击输入框,在输入框较小,手指又比较大,那么经常会在点击后,光标会在已有文字时,居左 我们的输入框文字肯定要居中的需要text-align:center,所以不用用text-align:right去排光标: jq代码如下: var val = $('input').val() $('input').focus(); $('input').val(''); $('input').val(val); 当然用js也一样

chrome,ff,IE input光标元素不能居中的问题

背景 input css样式: { height:50px;width:386px;border:0;position:absolute;top:0;left:0; padding:0px; line-height:50px;font-size:14px;.border-left-radius(4px); } 可以试一下,chrome中打开会发现光标出现在input元素的左上角.而不是预想中的居中.出现这样的原因如下: IE:不管该行有没有文字,光标高度与font-size一致. FF:该行有文

移动端弹出软键盘导致input光标和点击事件错位问题

我遇到的问题:在微信浏览器里,点击蒙层的input框,弹出软键盘,蒙层被顶上去,同时input的焦点和button的点击事件也被顶上去了,软键盘消失,蒙层回到原位,但是点击input和button均没反应,点击蒙层被顶上去的位置有反应,因为input的焦点和button的点击事件没回到原位.这个问题出现在ios中,android手机没问题. 以下是一位大佬写的解决方法,解决了我的问题. 原文地址:https://blog.csdn.net/Doubleu_/article/details/865