input输入框用一个背景图模拟,设置height和line-height一样的高度,使里面的输入文字能够居中,

在FF下出现的情况是:点击input时,输入光标其实上跟input的height一样高,但当开始输入文字时,光标又变得跟文字一样高,

chrome下光标跟input的height一样高,

而IE下光标跟文字的大小一致。

input输入框用一个背景图模拟,设置height和line-height一样的高度,使里面的输入文字能够居中,

在FF下出现的情况是:点击input时,输入光标其实上跟input的height一样高,但当开始输入文字时,光标又变得跟文字一样高,

chrome下光标跟input的height一样高,

而IE下光标跟文字的大小一致。

一直没弄明白为什么这样子,后来才知道原因所在。

初步结论如下:

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;
}

关于调整input里面的输入光标大小的更多相关文章

  1. chrome、firefox、IE中input输入光标位置错位解决方案

    以前在项目里碰到过一个问题 input输入框用一个背景图模拟,设置height和line-height一样的高度,使里面的输入文字能够居中, 在FF下出现的情况是:点击input时,输入光标其实上跟i ...

  2. input光标大小

    最近在做项目忘记密码页面时,input光标大小需要统一.同时也需要兼容ie8浏览器. 总结如下: IE:不管该行有没有文字,光标高度与font-size一致. FF:该行有文字时,光标高度与font- ...

  3. Demo 示例控制输入光标位置

    <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <meta name="aut ...

  4. input文字颜色、光标颜色

    <input type="text" placeholder="输入框"> input{ color: red;/*输入文字.光标颜色*/ -web ...

  5. 使用iScroll时,input等不能输入内容的解决方法

    做移动平台的应用,使用iscroll使屏幕上下滑动.发现当使用iscroll后,input等不能输入内容了.只要在iscroll.js文件中加入如下代码就ok了. function allowForm ...

  6. 使用iScroll时,input等不能输入内容的解决方法(share)

    最近做移动平台的应用,使用iscroll使屏幕上下滑动.发现当使用iscroll后,input等不能输入内容了.只要在iscroll.js文件中加入如下代码就ok了. function allowFo ...

  7. javascript限制input只允许输入数字

    在做数据提交的表单时,经常要对input输入内容的类型进行限制,譬如javascript限制input只允许输入数字,最好的方法当然是使用javascript,因为它不用与服务器交互,大大减轻了服务器 ...

  8. 使用 onpropertychange 和 oninput 检测 input、textarea输入改变

    检测input.textarea输入改变事件有以下几种: 1.onkeyup/onkeydown 捕获用户键盘输入事件. 缺陷:复制粘贴时无法检测 2.onchenge 缺陷:要满足触发条件:当前对象 ...

  9. html input验证只能输入数字,不能输入其他

    html input验证只能输入数字,不能输入其他 此方法为借鉴别人的,在此只做记录. <input type="text" onkeyup="if(!/^\d+$ ...

随机推荐

  1. 19、ASP.NET MVC入门到精通——Unity

    一.IOC介绍 IOC(Inversion of Control),中文译为控制反转,又称为“依赖注入”(DI =Dependence Injection) IOC的基本概念是:不创建对象,但是描述创 ...

  2. JMeter专题系列(四)参数化

    JMeter也有像LR中的参数化,本篇就来介绍下JMeter的参数化如何去实现. 参数化:录制脚本中有登录操作,需要输入用户名和密码,假如系统不允许相同的用户名和密码同时登录,或者想更好的模拟多个用户 ...

  3. jQuery元宵猜灯谜特效(元宵十五日猜一个字)

    在线体验:http://keleyi.com/keleyi/phtml/jqtexiao/35.htm jQuery元宵猜灯谜特效的HTML代码如下: <!DOCTYPE html> &l ...

  4. 手机浏览器不支持 IDBObjectStore.getAll

    最近在学习IndexDB,使用了IDBObjectStore.getAll,发现手机上不支持. 后面,查阅了mdn:  的确是不支持,且可以看到这个函数现在兼容性很差. 解决方法: 1.使用 IDB ...

  5. angularJs

    学了差不多一个礼拜,感觉这个库还是很不错的,在应用中一些小笔记,其实这些笔记现在来看确实很基础,但是把这个博客当成我自己的一个记录历程,所以我也把这点笔记拿上来: 1.是一个js框架,是一个以js语言 ...

  6. Mockito Hello World

    Mockito Hello World 项目配置 IDE是Intellij IDEA,用gradle配置项目. 新建一个Java项目,gradle中需要有这个:   repositories { jc ...

  7. nodejs的child_process同步异步

    nodejs是一种单线程模型,但是,使用nodejs的child_process模块可以实现多进程任务.利用child_process可以创建子进程,实现子进程和主进程之间的通信. nodejs v0 ...

  8. git笔记

    这篇有关git的博客,写着写着有些崩了.里面有些碎碎念了.下次一定注意这个问题. 创建项目: midir xx :创建xx文件夹 git init : 为当前文件夹创建代码仓库 提交代码: git a ...

  9. ORA-01078: failure in processing system parameters & LRM-00109: could not open parameter file

    安装了Oracle 12C后,启动数据库的过程中出现如下错误 SQL> startup ORA-01078: failure in processing system parameters LR ...

  10. Linux LVM学习总结——放大LV容量

    本篇介绍LVM管理中的命令lvresize,我们先创建一个卷组VG VolGroup02,它建立在磁盘/dev/sdc (大小为8G)上.创建逻辑卷LV时,我们故意只使用了一小部分.具体情况如下所示 ...