原文地址: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. eclipse新建maven项目(2)

    本篇博文是继续之前的博文eclipse新建maven项目(1),那篇博文不在随笔在文章中.首先按照之前那篇博文进行创建maven项目操作,一系列操作下来之后发现刷新项目后会报错: 别急哈,可以解决. ...

  2. 2015 - 准备读书List

    时刻提醒自己,不进步意味着倒退. 2015年准备读完的技术书籍: 1. <Redis设计与实现>

  3. 大家一起撸代码之——Hibernate各种主键生成策略与配置详解

    1.assigned 主键由外部程序负责生成,在 save() 之前必须指定一个.Hibernate不负责维护主键生成.与Hibernate和底层数据库都无关,可以跨数据库.在存储对象前,必须要使用主 ...

  4. SQLServer2005+分页SQL

    declare @pagenum int = 1; declare @pagesize int = 3; WITH Tmp AS ( SELECT ROW_NUMBER() OVER (ORDER B ...

  5. CSS中的浮动和定位

    在了解CSS中的浮动和定位之前有必要先了解清楚标准流和脱离标准流的特性 标准流的默认特性 1.分行.块级元素,并且能够dispay转换. 2.块级元素(block):默认独占一行,不能并列显示,能够设 ...

  6. CutJS – 用于 HTML5 游戏开发的 2D 渲染引擎

    CutJS 是轻量级的,快速的,基于 Canvas 开发的 HTML5  2D 渲染引擎,可以用于游戏开发.它是开源的,跨平台的,与现代的浏览器和移动设备兼容.CutJS 提供了一个类似 DOM 树的 ...

  7. Tomcat部署记事

    1.导入证书到jdk里 keytool -import -alias 证书名称 -file 证书地址 -keystore 导入位置 例:keytool -import -alias co3 -file ...

  8. JavaScript学习笔记-面向对象的模块化编程

    面向对象的模块化编程 模块是一个独立的JS文件,模块文件可以包含一个类定义.一组相关的类.一个实用函数库.一些待执行的代码 模块化的目标:支持大规模的程序开发,处理分散源代码的组装,并能让代码正确执行 ...

  9. jQuery原型方法each使用和源码分析

    jQuery.each方法是jQuery的核心工具方法之一,通用例遍方法,可用于例遍对象和数组.不同于例遍 jQuery 对象的 $().each() 方法,此方法可用于例遍任何对象.通常需要两个参数 ...

  10. HTML <a> 标签

    一,定义和用法 所有浏览器都支持 <a> 标签. <a> 标签定义超链接,用于从一张页面链接到另一张页面. <a> 元素最重要的属性是 href 属性,它指示链接的 ...