原文地址:http://blog.csdn.net/luochao_tj/article/details/17755457

input[type='text']文本框光标高度在有输入内容和为空时发生很大变化。

首先,先看看问题产生的原因:chrome浏览器对光标高度的设置原则为,当没有内容的时候光标的高度=input的line-height的值,当有内容时,光标从input的顶端到文字的底部。

OK,既然知道了原因,我们就相应才去一些措施。尝试了两种方法去做:。

方法1:将line-height的值设置为跟字体大小一致;如果高度达不到,用padding去撑;

方法2:对chrome不设置line-height,它会自动文字居中,对ie进行hack设置line-height的值以保证文字垂直居中;
这里要注意一下,如果在reset的样式文件中有设置line-height等值,请进行line-height的重置,可以用line-
height:normal。

【转】input输入框中光标高度的变化问题的更多相关文章

  1. input输入框的光标定位的问题

    input输入框的光标定位的问题 在给input输入框赋值的时候,或者在我之前写模拟下拉框js组件的时候,时不时会碰到光标的小bug问题,比如键盘中的 上移或者下移操作,在浏览器中光标会先移到最前端, ...

  2. 控制input输入框中提示信息的显示和隐藏的方法

    在运用html+css+javascrpt进行页面制作时,我们往往会遇到一些影响用户体验,而又容易被我们忽视的小细节.比如,input输入框中的提示信息,怎样才能根据对象获得和失去焦点而实现其显示和隐 ...

  3. 实现bootstrap布局的input输入框中的图标点击功能

    使用bootstrap布局可以在input的输入框中添加譬如登录名输入框中的一键清除图标和密码输入框中显示密码的小眼睛图标.如下图: 但是在将图标放入input输入框中,这些小图标是无法获得点击事件的 ...

  4. jquery获取input输入框中的值

    如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML <input type="tex ...

  5. js与jquery获取input输入框中的值

    如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML 一.jquery获取input文本框中的值 通过 ...

  6. 去除Input输入框中边框的方式

    我们在做制作注册页面时,经常会需要消除Input带来的边框,这时候我们需要用到两个属性 一个是input在非激活状态下,不现实边框,代码规则为 border:none:同时当鼠标移到input输入框上 ...

  7. input输入框的光标

    上午的时候,以前一起配合Java后端的哥们问了个input光标的问题. 需求是这样:只能输入数字的input(一开始以为是输入金额这些的,后来才晓得是用来填写手机号) 他采用是直接百度来的如下方法: ...

  8. selenium 获取input输入框中的值的方法

    方法一:获取input的文本值 <input class="form-text-normal" id="txtName" name="Name& ...

  9. 实时获取input输入框中的值

    //输入框正在输入时 $("#ipt").on('input',function(){ if(!($('#ipt').val()=='')){ $(".cancle_ic ...

随机推荐

  1. python signal(信号)

    信号的概念 信号(signal)--     进程之间通讯的方式,是一种软件中断.一个进程一旦接收到信号就会打断原来的程序执行流程来处理信号. 几个常用信号: SIGINT     终止进程  中断进 ...

  2. Verilog学习笔记简单功能实现(八)...............异步FIFO

    基本原理:       1.读写指针的工作原理 写指针:总是指向下一个将要被写入的单元,复位时,指向第1个单元(编号为0). 读指针:总是指向当前要被读出的数据,复位时,指向第1个单元(编号为0). ...

  3. Android总结篇系列:Android开发环境搭建

    工欲善其事必先利其器. 1.安装并配置Java环境进入Java oracle官网,当前网址如下:http://www.oracle.com/technetwork/java/javase/downlo ...

  4. Jquery UI 和Easy UI常用插件

    一.Jquery的插件简介 (一)什么是插件 插件(Plug-in)是一种遵循一定的应用程序接口规范编写出来的程序,是原有系统平台或应用软件平台功能的一种扩展和补充. 注意!!其只能在程序规定的系统平 ...

  5. Baraja演示15种不同的洗牌特效

      实例演示 下载地址 实例代码 实例演示 实例代码 <div class="container"> <header class="clearfix&q ...

  6. 使用XmlHelper添加节点C#代码

    接着上一篇:http://keleyi.com/a/bjac/ttssua0f.htm在前篇文章中,给出了C# XML文件操作类XmlHelper的代码,以及使用该类的一个例子,即使用XmlHelpe ...

  7. [deviceone开发]-动画示例源码

    一.简介 do_FrameAnimtionView组件是用加载GIF动态图片和加载一系列图片形成动画效果的展示组件,这个示例直观的展示组件基本的使用方式.适合初学者. 二.效果图 三.相关讨论 htt ...

  8. Node入门

    一 node定位 Node.js是一个事件驱动I/O服务端JavaScript环境,是一个基于Google的V8引擎的Chrome JavaScript 运行时建立的一个平台. 二 node安装 (1 ...

  9. SharePoint 2013 在母版页中插入WebPart

    最近QQ群里有朋友问,如何在母版页里插入自己开发的WebPart.其实很简单,母版页中虽然不允许插入WebPartZone,但是Designer就可以插入WebPart:或者手动注册,然后插入WebP ...

  10. android gps定位LocationManager

    android location provider有: * LocationManager.GPS_PROVIDER:GPS,精度比较高,但是慢而且消耗电力,而且可能因为天气原因或者障碍物而无法获取卫 ...