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. 向 div 元素添加圆角边框:

    div { border:2px solid; border-radius:25px; }

  2. Struts2运行流程

    解释:首先浏览器发送一个请求.给/StrutsPrepareAndExecuteFilter调用doFilter()方法.创建/StrutsActionProxy执行execute()方法.有一个引用 ...

  3. 从零开始学Python第一周:Python基础(上)

    Python语法基础(上) 一,Python的变量 (1)创建变量 变量的含义:存储信息的地方 创建变量并赋值 x = 1 print x x = 123 #再次赋值 print x (2)使用变量 ...

  4. python tornado websocket 实时日志展示

    一.主题:实时展示服务器端动态生成的日志文件 二.流程: 1. 客户端浏览器与服务器建立websocket 链接,服务器挂起保存链接实例,等待新内容触发返回动作 2. 日志服务器脚本循环去发现新内容, ...

  5. 【工业串口和网络软件通讯平台(SuperIO)教程】三.二次开发流程

    1.1    二次开发流程图 1.2    引用相关组件 找到“开发包”,引用里边的相关组件.如下图: 1.3    开发设备驱动模块 1.3.1    开发发送协议驱动 继承SuperIO.Devi ...

  6. nodejs 命令行、自定义

    一.必备插件 1. babel:es6语法支持,需要babel-perset-es2015(转换成es5执行).babel.babel-core(程序执行) 2. commander:自定义命令插件, ...

  7. jquery在线五子棋

    在线五子棋试玩地址:http://keleyi.com/game/12/ 以下是完整代码,保存到html文件打开也可以玩: <!DOCTYPE html> <html> < ...

  8. SharePoint Conference 2014 Keynote

    让我们来看看今年 SharePoint Conference 2014 的重点都是些什么内容.虽然 BI 那个视频很有趣儿,但是 keynote 可能更重要一些,所以,先研究 keynote. 概括来 ...

  9. C#操作Excell常用方法

    这是在博客园看的文章,写的很好,所以转一下,方便自己以后用到的时候可以随时查看. range.NumberFormatLocal = "@";     //设置单元格格式为文本 r ...

  10. Android log 管理工具

    1.logger 项目地址: https://github.com/orhanobut/logger 2.KLog 项目地址:https://github.com/ZhaoKaiQiang/KLog ...