以前在项目里碰到过一个问题

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:4px0px;
font-size:12px;
}

这是从网上看到的别人的经验分享 具体的网址忘记了 sorry~~~

chrome、firefox、IE中input输入光标位置错位解决方案的更多相关文章

  1. elementUi中input输入字符光标在输入一个字符后,光标失去焦点

    elementUi中input输入字符光标在输入一个字符后,光标就退出,无法输入需要再次聚焦然后输入一个字符又再次退出 首先,用elementUi正常用v-model绑定输入的值是不会造成光标退出的, ...

  2. vue中input输入第一个字符时,光标会消失,需要再次点击才能输入

    vue中input输入第一个字符时,光标会消失,需要再次点击才能输入 在这里我犯了一个小错误,v-if语法比较倾向于一次性操作,当input获取焦点时,v-if判断为true,立即刷新数据,进行渲染, ...

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

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

  4. C#-WinForm-如何获取文本框(TextBox)中鼠标,光标位置

    文本框(TextBox)中的鼠标位置和光标位置是两个不同的概念,鼠标位置是要点击鼠标后(NouseDown)获取到,而光标位置却是实时就要获取到,也就是用户输入一个字符(KeyUp),这个位置就要改变 ...

  5. 2017-02-20 可编辑div中如何在光标位置添加内容

    之前做了一个可编辑div需要在里面插入内容,搜了好多代码,就这个能实现我的功能,记录一下,以备以后用 <!DOCTYPE HTML> <html> <head> & ...

  6. h5 ios手机 隐藏input输入光标

    前面在做一个H5中用到的6位数字密码弹框(类似支付.微信那种)时,遇到一个可怕问题,那就是在浏览器和安卓中是不显示输入光标的,但是在ios手机上光标总是能看见,像穿透一样地显示最外层. 先说下实现密码 ...

  7. ios中input输入无效

    项目中一个登陆界面的input在安卓下可以输入,iOS下无法输入,经查询为 设置了-webkit-user-select:none;将其改为-webkit-user-select:auto;修正. 参 ...

  8. (转) 改变UITextField placeHolder颜色、字体 、输入光标位置等

    我们有时需要定制化UITextField对象的风格,可以添加许多不同的重写方法,来改变文本字段的显示行为.这些方法都会返回一个CGRect结构,制定了文本字段每个部件的边界范围,甚至修改placeHo ...

  9. ios中 input 焦点光标不垂直居中

    笔记:在ios,如果同时给input设置这种平时我们使字体垂直居中的css写法. 光标会出现,如下图的问题 . 改正方案: 采取不使用line-height的垂直居中方法即可.

随机推荐

  1. Socket编程(day14)

    一.基于TCP传输层的编程模型 TCP是面向连接的,安全可靠的. 三次握手 服务器端编程模型 .创建一个用于网络通讯的设备 通讯端点 socket() #include <sys/types.h ...

  2. shell脚本编程及bash特性

    bash特性及bash脚本编程初步 终端,附着在终端的接口程序; GUI: KDE,GNome,Xfce CLI: /etc/shells bash的特性: 命令行展开: ~,{} 命令别名: ali ...

  3. 【习题 4-7 UVA - 509】RAID!

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 如果一行里面某位有>1个x 那么是invalid的. 没有x的话. 可以分析以下(设输入的标准Even为0,然后Odd为1) ...

  4. 0929MySQL JOIN的算法

    http://www.cnblogs.com/starhu/p/6418842.html http://www.cnblogs.com/starhu/p/6418833.html http://www ...

  5. javascript Prototype constructor的理解(转)

    讲JS的构造的,这个比较清晰,但并不表示一定正确. 这几天一直在思考这个东东,感觉比以前理解更深入了. http://blog.csdn.net/chunqiuwei/article/details/ ...

  6. Dynamics CRM 2015 New Feature (9): Services Changes

    Dynamics CRM 2015 为开发者加入了一些新的Service Request以及一个帮助类库XrmTooling,它支持连接各种环境下的CRM,比方:Online,O365,On Prem ...

  7. 怎样预置Android 手机 APK

    预制APK有下面4种情况: 1, 怎样将带源代码的 APK 预置进系统? 2, 怎样将无源代码的APK预置进系统? 3, 怎样预置APK使得用户能够卸载,恢复出厂设置时不能恢复? 4, 怎样预置APK ...

  8. PyCharm 运行工程

  9. 0=='aa'的结果是true

    来源于一道面试题: PHP的类型转换规则 1.如果是一个数字与一个字符串进行比较,那么会把字符串转换为数字再比较 2.字符串的转换规则,若字符串以数字开头,则取开头数字作为转换按结果,若无,则取0

  10. modelstate.isvalid false

    http://stackoverflow.com/questions/1791570/modelstate-isvalid-false-why 第一个 About "can it be th ...