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

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. The story of one latency spike

    转自:https://blog.cloudflare.com/the-story-of-one-latency-spike/ A customer reported an unusual proble ...

  2. 国庆day2

    a[问题描述]你是能看到第一题的 friends呢.—— hja世界上没有什么比卖的这 贵弹丸三还令人绝望事了,所以便么一道题.定义

  3. [Ynoi2015]即便看不到未来

    题目大意: 给定一个序列,每次询问,给出一个区间$[l,r]$. 设将区间内的元素去重后重排的数组为$p$,求$p$中长度为$1\sim 10$的极长值域连续段个数. 长度为$L$的极长值域连续段的定 ...

  4. 洛谷 P1602 Sramoc问题

    题目描述 话说员工们整理好了筷子之后,就准备将快餐送出了,但是一看订单,都傻眼了:订单上没有留电话号码,只写了一个sramoc(k,m)函数,这什么东西?什么意思?于是餐厅找来了资深顾问团的成员,YQ ...

  5. C#--线程池与线程的种类

    .NET CLR线程的种类 至少3个线程:主线程.调试线程.终结器线程 1.main thread 2.worker thread 3.finalizer thread 4.debugger help ...

  6. 如何用arcgis进行WGS84的投影坐标变换

    转自原文 如何用arcgis进行WGS84的投影坐标变换 通常情况下,要求WGS 84下的投影坐标,选择UTM投影. 1.UTM投影 UTM投影全称为“通用横轴墨卡托投影”UNIVERSAL TRAN ...

  7. C#编程中,在页面上如何弹出确认删除对话框

    对于页面完成一个操作后,弹出一个对话框提示是否“操作成功”.举例如下:Response.Write("<script>alert('删除成功!')</script>& ...

  8. 介绍C++ STL常用模板使用方法的相关资料

    1.vector的几种初始化及赋值方式

  9. 从编程的角度理解gradle脚本﹘﹘Android Studio脚本构建和编程[魅族Degao]

    本篇文章由嵌入式企鹅圈原创团队.魅族资深project师degao撰写. 随着Android 开发环境从Eclipse转向Android Studio,我们每一个人都開始或多或少要接触gradle脚本 ...

  10. mysql稳定的版本号选择及下载说明(2014-11-10)

    怎样选择新稳定的版本号       mysql的版本号大概能够分为Alpha.Beta.GA. GA版即mysql官方公布的稳定版本号. 怎样在官方下载Mysql        能够通过http:// ...