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

注:input有个outline属性我们不需要外边框就可以去掉outline:none,还有去掉border:none;这时候你会发现这个input和一个div一样很好调样式,已经被你征服~~

我在写input基本上会在input外面套上个div包着,div的大小和input一样,外面的div还可以设置许多样式,用户点击div其实是触发的是input.很好的解决了input的bug问题。

ie 下input光标位置垂直不居中问题的更多相关文章

  1. input光标位置

    兼容谷歌火狐-input光标位置 input框在没有添加任何效果的情况下,输入文字后光标始终在最后的位置,谷歌||火狐效果一样 但是在给input加入点击事件后 谷歌:input框插入文字后,光标会自 ...

  2. Recoil Input 光标位置被重置到末尾的问题

    考察如下代码,页面中有个输入框,通过 Recoil Atom 来存储输入的值. App.tsx function NameInput() { const [name, setName] = useRe ...

  3. input光标位置不居中问题

    文本输入框默认在谷歌,火狐浏览器中,光标是居中显示的.但在IE7中一开始会在顶部闪烁(输入文字后光标居中),加上行高就可以,值为文本框的高度. 注意要加*号,否则在谷歌浏览其中光标会在顶部闪烁. *l ...

  4. 【转】移动端input输入placeholder垂直不居中

    在移动端编写input输入框时候,为了输入文字与输入框垂直居中,一般情况下,会将input的line-height的高度等于height.但在移动端输入的时候会发现,虽然输入内容确实是垂直居中了,但是 ...

  5. 移动端input输入placeholder垂直不居中

    在移动端编写input输入框时候,为了输入文字与输入框垂直居中,一般情况下,会将input的line-height的高度等于height.但在移动端输入的时候会发现,虽然输入内容确实是垂直居中了,但是 ...

  6. ie浏览器下input和select的上下居中问题!!!!

    在Google浏览器下的input和select标签里面的文字是根据它的高度自适应上下居中的,而ie浏览器下的input和select里面的文字就不会根据高度自适应上下居中,跟大家分享一下我的解决方法 ...

  7. 解决只读时ios下input光标问题

    应用场景:在ios手机下对只读的input设置readonly=readonly属性还是会出现光标 解决方法: //解决ios日期光标问题 $("#Stime ,#provinceCity& ...

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

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

  9. 可编辑div中包含子元素时获取光标位置不准确的问题

    前言: 高亮显示输入框中的关键字符,这就必须得用到可编辑div(或其他标签)元素了,这时我们需要获取光标的位置,以便插入字符. 正文: 正常情况下获取光标位置,代码如下: function getPo ...

随机推荐

  1. 什么是http?

    http请求流程: http课程链接:http://www.imooc.com/video/6712/0

  2. MySQL初始4--去重

    更新表中的字段: update 表名 set 字段=新值,… where 条件: UPDATE语法可以用新值更新原有表行中的各列.SET子句指示要修改哪些列和要给予哪些值.WHERE子句指定应更新哪些 ...

  3. CubieTruck使用笔记--SD卡中使用lubuntu

    http://docs.cubieboard.org/tutorials/ct1/installation/install_lubuntu_desktop_server_to_sd_card 按照上面 ...

  4. lincode-58-四数之和

    58-四数之和 给一个包含n个数的整数数组S,在S中找到所有使得和为给定整数target的四元组(a, b, c, d). 注意事项 四元组(a, b, c, d)中,需要满足a <= b &l ...

  5. 用Electron开发桌面应用app的相关文献集锦

    1. 超棒的发声器(项目实战) 原文点此链接 2. Electron中文文档 原文点此链接

  6. DDD-领域驱动设计

    识别领域事件 DDD战术篇:领域模型的应用 DDD战略篇:架构设计的响应力 DDD实战篇:分层架构的代码结构

  7. 【bzoj4002】[JLOI2015]有意义的字符串 数论+矩阵乘法

    题目描述 B 君有两个好朋友,他们叫宁宁和冉冉.有一天,冉冉遇到了一个有趣的题目:输入 b;d;n,求 输入 一行三个整数 b;d;n 输出 一行一个数表示模 7528443412579576937 ...

  8. 完全解析线程池ThreadPool原理&使用

    目录 1. 简介 2. 工作原理 2.1 核心参数 线程池中有6个核心参数,具体如下 上述6个参数的配置 决定了 线程池的功能,具体设置时机 = 创建 线程池类对象时 传入 ThreadPoolExe ...

  9. 【BZOJ 3232】圈地游戏 二分+SPFA判环/最小割经典模型

    最小割经典模型指的是“一堆元素进行选取,对于某个元素的取舍有代价或价值,对于某些对元素,选取后会有额外代价或价值”的经典最小割模型,建立倒三角进行最小割.这个二分是显然的,一开始我也是想到了最小割的那 ...

  10. cookie中的path与domain属性详解

    1.domain表示的是cookie所在的域,默认为请求的地址,如网址为www.jb51.net/test/test.aspx,那么domain默认为www.jb51.net.而跨域访问,如域A为t1 ...