【转】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 ...
随机推荐
- Scalaz(5)- typeclass:my typeclass scalaz style-demo
我们在上一篇讨论中介绍了一些基本的由scalaz提供的typeclass.这些基本typeclass主要的作用是通过操作符来保证类型安全,也就是在前期编译时就由compiler来发现错误.在这篇讨论中 ...
- [javaSE] 注解-JDK中的注解
java中的常见注解 jdk自带注解:@Override 覆盖 @Deprecated 过期 @Suppvisewarnings 压制警告 package com.tsh.ano; public ...
- Java集合源码分析(五)HashSet<E>
HashSet简介 HashSet实现Set接口,由哈希表(实际上是一个HashMap实例)支持.它不保证set 的迭代顺序:特别是它不保证该顺序恒久不变.此类允许使用null元素. HashSet源 ...
- HTML <a> 标签
一,定义和用法 所有浏览器都支持 <a> 标签. <a> 标签定义超链接,用于从一张页面链接到另一张页面. <a> 元素最重要的属性是 href 属性,它指示链接的 ...
- 移动端图片滚动加载-lazyload实现的要点总结
最近在做移动端的营销页面时,遇到了页面有大量图片的情况,于是很自然的想到了要使用图片lazyload,PC端用着jQuery,也有现成的插件.但是在移动端,基本不用jQuery,于是就试着自己去造一下 ...
- Android PopupWindow的使用和分析
Android PopupWindow的使用和分析 PopupWindow使用 PopupWindow这个类用来实现一个弹出框,可以使用任意布局的View作为其内容,这个弹出框是悬浮在当前activi ...
- iOS中sqlite版本号
https://github.com/yapstudios/YapDatabase/wiki/SQLite-version-(bundled-with-OS) https://github.com/y ...
- 小谈KVC中KeyPath的集合运算符
由于知识点比较简单,这里不再陈述一大堆的原理,直入主题. KVC中的集合运算符有以下三类: 1.简单集合运算符:@avg.@sum.@max.@min.@count (只能用在集合对象中,对象属性必须 ...
- Android之Splash页面
在继上个任务没有解决之后,心灰意冷之后,现在的我在跟着视频学习开发一个手机卫士的软件.在写自己的笔记之前,我先来展示一下我的结果. 下面我来总结一下我跟随视频学习到的知识点: 一.代码的组织结构: 1 ...
- iOS之属性修饰符 retain、strong和copy区别测试
时不时会有点迷惑属性修饰符retain.strong.copy三者之间的区别,还是把测试过程记录下来好一点! 1.属性修饰符结论 2.给retain.strong.copy修饰的字符串属性赋值指针变化 ...