【转】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 NSMutableAttributedString
NSMutableAttributedString 是一个很强悍的富文本处理字符串,可以方便的实现一个字符串中某个字符的样式处理.我把我下面代码实现的功能步骤说一下:首先拼接两个字符串,然后给前前半部 ...
- 代码与图详解性能之Python集合类型(list tuple dict set generator)
Python内嵌的集合类型有list.tuple.set.dict. 列表list:看似数组,但比数组强大,支持索引.切片.查找.增加等功能. 元组tuple:功能跟list差不多,但一旦生成,长度及 ...
- Java经典实例:使用ChoiceFormat来格式化复数
import java.text.ChoiceFormat; /** * Created by Frank */ public class FormatPuralsChoice extends For ...
- MD5加密操作
MD5加密操作:MD5加密算法原理MD5的全称是Message-Digest Algorithm 5(信息-摘要算法),它的作用是让大容量信息在用数字签名软件签署私人密匙前被"压缩" ...
- 赞!带进度条的 jQuery 文件拖放上传插件
jQuery File Uploader 是一个 jQuery 文件拖放上传插件,包括 Ajax 上传和进度条效果.作者编写这个插件的想法是要保持它非常简单,不像其他的插件,很多的标记,并提供一些 H ...
- Refusing to install webpack as a dependency of itself
用npm安装webpack的时候报了这个错: Refusing to install webpack as a dependency of itself 翻译过来大概是:'拒绝安装webpack其本身 ...
- SharePoint 2010 文档管理系列之文档搜索
前言:如果一个文档库里面有很多文档,成千上万,对我们来说查找就是个麻烦事儿,所以搜索的必要性就体现出来了.下面,我们简单的介绍下,sharepoint搜索配置,并创建一个简单的搜索页面. 一. 配置S ...
- DevExpress v15.2.4帮助文档下载(全)
原文地址:http://www.devexpresscn.com/Resources/Documentation-498.html DevExpress v15.2帮助文档下载列表大全来啦!包含.ne ...
- 【Leafletjs】7.结合echart图表展示信息
1.popup中添加图表信息 //定义marker var marker = L.marker(val.location).addTo(map); var content = '<div sty ...
- iOS开发之AFN的基本使用
本篇将从四个方面对iOS开发中经常使用到的AFNetworking框架进行讲解: 一.什么是 AFN 二.为什么要使用 AFN 三.AFN 怎么用 三.AFN和ASI的区别 一.什么是 AFN AFN ...