原文地址: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. 2016暑假多校联合---Death Sequence(递推、前向星)

    原题链接 Problem Description You may heard of the Joseph Problem, the story comes from a Jewish historia ...

  2. ThinkCMF-幻灯片制作

    在后台的扩展工具 -> 幻灯片分类 添加分类标识为"portal_index"的分类,然后在此分类添加幻灯片. 个人认为,此处可以用于: 1. 门户网站的首页幻灯片播放功能: ...

  3. selenium + python自动化测试环境搭建

    selenium的在python平台的搭建: 搭建平台windows 准备工具如下: --------------------------------------------------------- ...

  4. Java空白final

    Java 1.1允许我们创建"空白final",它们属于一些特殊的字段.尽管被申明为final,但却未得到一个初始值. 无论在哪种情况下,空白final都必须在实际使用前得到正确的 ...

  5. jquery.datepair日期时分秒选择器

    jquery.datepair是一个轻量级的jQuery插件,智能选择日期和时间范围,灵感来自于谷歌日历.Datepair将保持开始和结束日期/时间同步,并可以根据用户的操作设置默认值.该插件不提供任 ...

  6. Trumbowyg - 轻量的 WYSIWYG 编辑器

    Trumbowyg 是一个轻量,可定制的 jQuery 所见即所得(WYSIWYG)的编辑器插件.美丽的设计,生成语义化代码,带有功能强大的 API .编辑器和生成的代码进行了优化以支持 HTML5. ...

  7. TOCControl上实现右键

    第一步:新建另外一个窗体 首先要定义一个全局变量 ILayer. 窗体要带参数,以便将 ILayer 传递过来. 获取属性列表. using System; using System.Collecti ...

  8. arcgis engine 调用arcgis server服务

    首先需要添加两个引用: using ESRI.ArcGIS.GISClient;using ESRI.ArcGIS.DataSourcesRaster; /// <summary> /// ...

  9. iOS开发--Swift 基于AFNetworking 3.0的网络请求封装

    Swift和OC基于AFNetworking的网络请求流程相同, 就是语法不同, 对于Swift语法不是很清楚的同学, 建议多看看API文档, 自己多多尝试. 写过OC的应该都明白每句话做什么的, 就 ...

  10. Protocol and Delegate协议和代理

    1.什么是协议?  OC协议仿照Java的接口.协议和接口,都是不同类的对象之间一种通信的机制.2.协议的基础语法  单纯的语言描述协议的语法,很难让人理解,主要因为在OC中协议是类对象的通信机制,他 ...