【转】input输入框中光标高度的变化问题
原文地址: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输入框中光标高度的变化问题的更多相关文章
- input输入框的光标定位的问题
input输入框的光标定位的问题 在给input输入框赋值的时候,或者在我之前写模拟下拉框js组件的时候,时不时会碰到光标的小bug问题,比如键盘中的 上移或者下移操作,在浏览器中光标会先移到最前端, ...
- 控制input输入框中提示信息的显示和隐藏的方法
在运用html+css+javascrpt进行页面制作时,我们往往会遇到一些影响用户体验,而又容易被我们忽视的小细节.比如,input输入框中的提示信息,怎样才能根据对象获得和失去焦点而实现其显示和隐 ...
- 实现bootstrap布局的input输入框中的图标点击功能
使用bootstrap布局可以在input的输入框中添加譬如登录名输入框中的一键清除图标和密码输入框中显示密码的小眼睛图标.如下图: 但是在将图标放入input输入框中,这些小图标是无法获得点击事件的 ...
- jquery获取input输入框中的值
如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML <input type="tex ...
- js与jquery获取input输入框中的值
如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML 一.jquery获取input文本框中的值 通过 ...
- 去除Input输入框中边框的方式
我们在做制作注册页面时,经常会需要消除Input带来的边框,这时候我们需要用到两个属性 一个是input在非激活状态下,不现实边框,代码规则为 border:none:同时当鼠标移到input输入框上 ...
- input输入框的光标
上午的时候,以前一起配合Java后端的哥们问了个input光标的问题. 需求是这样:只能输入数字的input(一开始以为是输入金额这些的,后来才晓得是用来填写手机号) 他采用是直接百度来的如下方法: ...
- selenium 获取input输入框中的值的方法
方法一:获取input的文本值 <input class="form-text-normal" id="txtName" name="Name& ...
- 实时获取input输入框中的值
//输入框正在输入时 $("#ipt").on('input',function(){ if(!($('#ipt').val()=='')){ $(".cancle_ic ...
随机推荐
- Objective-c 动画
想提高下以后做的应用给客户带去的体验,所以看了几天OC的CAAnimation动画类,也做了几个小案例,下面讲个别案例来做为本文的主要内容. 一:继承结构截图 上面截图中用得最多的类大概就是,CABa ...
- IOS----友盟推送详解
这两天好好的研究了下推送这功能,关于它我将分成两部分来讲,一.IOS手机端,二.Servlet服务端,今天先讲下IOS端 一.感受 下面讲下我对推送这个功能在IOS下的感受,这个算是我做了服务端的功能 ...
- rabbitmq启动异常之error,{not_a_dets_file recovery.dets
中午,公司群里面测试人员@笔者说,早上测试服务器异常,MQ起不来,重启os了也起不来,报错,上去看下了早上又因为内存oom被内核killed了,启动了下,确实启动报错,erl vm进程起来了,但是be ...
- 小白linux安装php 5.6+nginx配置(踩坑版)
因为要搭建个知识库,直接用wordpress,这前提是得先装php,实在不喜欢XAMPP,所以自己折腾,没想到php这一来还不少啊,从头到尾折腾了一个小时多.记录下主要的流程和遇到的坑. 首先官网下载 ...
- mysql出错:Access denied for user 'root'@'localhost' (using password: YES)
网站链接mysql数据库的时候,连接不上,并报出错误:Access denied for user 'root'@'localhost' (using password:YES) 这是个相当恼火的问题 ...
- 如何去除My97 DatePicker控件上右键弹出官网的链接 - 如何debug混淆过的代码
概述 http://my97.net/是一个web浏览器的日期选择控件,非常好用,做得非常棒,各种API等事件等都很方便,但是使用了4.8beta3之后,在控件上面右击会出现官网链接 ,这个是PM以及 ...
- Code First :使用Entity. Framework编程(2) ----转发 收藏
第二章:Code First概览 如果你使用第一.二版的EF框架工作过,你会回想起书中的业务案例:Break Away Geek Adventures, 简称BAGA.BAGA共享了很多像我们这样的奇 ...
- 原生JS:Array对象详解
Array对象 本文参考MDN做的详细整理,方便大家参考[MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ ...
- css3选择器(上)
1.给导航加分割线,左右 .nav li::before,.nav li::after{ content:""; position:absolute; top:14px; heig ...
- 源码详解openfire保存消息记录_修改服务端方式
实现openfire消息记录通常有两种方式,修改服务端和添加消息记录插件. 今天,简单的说明一下修改服务端方式实现消息记录保存功能. 实现思路 修改前: 默认的,openfire只提供保存离线记录至o ...