最近在做项目忘记密码页面时,input光标大小需要统一。同时也需要兼容ie8浏览器。

总结如下:

IE:不管该行有没有文字,光标高度与font-size一致。

FF:该行有文字时,光标高度与font-size一致。该行无文字时,光标高度与input的height一致。

Chrome:该行无文字时,光标高度与line-height一致;该行有文字时,光标高度从input顶部到文字底部(这两种情况都是在有设定line-height的时候),如果没有line-height,则是与font-size一致。

解决的方案:

给input的height设定一个较小的高度,然后用padding去填充,基本上可以解决所有浏览器的问题

input{
height: 16px;
padding: 4px 0px;
font-size: 12px;
}

input光标大小的更多相关文章

  1. input光标高度问题

    input输入框光标高度问题IE:不管该行有没有文字,光标高度与font-size大小一致 FF:该行没有文字时,光标大小与input的 height 大小一致:该行有文字时,光标大小与font-si ...

  2. input长度随输入内容动态变化 input光标定位在最右侧

    <input type="text" onkeydown="this.onkeyup();" onkeyup="this.size=(this. ...

  3. input 光标在 chrome下不兼容 解决方案

    input 光标在 chrome下不兼容 解决方案 height: 52px; line-height: normal; line-height:52px\9 .list li input[type= ...

  4. 隐藏input光标和输入内容方法

    text-indent: -999em; // 隐藏input文字margin-left: -100%;// 隐藏input光标

  5. input光标位置

    兼容谷歌火狐-input光标位置 input框在没有添加任何效果的情况下,输入文字后光标始终在最后的位置,谷歌||火狐效果一样 但是在给input加入点击事件后 谷歌:input框插入文字后,光标会自 ...

  6. IOS中input光标跑偏问题的解决方法

    ios端兼容input光标高度处理 在最近的项目中遇到一个问题,input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上 当点击输入的时候,光标的高度和父盒子的高度一样.造成的原因就是给父盒子 ...

  7. 关于调整input里面的输入光标大小

    input输入框用一个背景图模拟,设置height和line-height一样的高度,使里面的输入文字能够居中, 在FF下出现的情况是:点击input时,输入光标其实上跟input的height一样高 ...

  8. ie 下input光标位置垂直不居中问题

    input输入框用一个背景图模拟,设置height和line-height一样的高度,使里面的输入文字能够居中, 在FF下出现的情况是:点击input时,输入光标其实上跟input的height一样高 ...

  9. 苹果手机iOS11中fixed弹出框中input光标错位问题

    最近遇到了一个移动前端的BUG:手机弹出框中的输入框focus时光标可能会错位. 刚开始时我完全不知道错误原因是什么,在电脑上调试时完全没有问题,手机上出现问题时也没有找到规律.后来在网上搜索了大量的 ...

随机推荐

  1. VS的ASP.NET项目中cshtml关键词出错 红线,当前上下文中不存在名称

    [参考]VS的ASP.NET项目中cshtml突然出错,当前上下文中不存在名称“ViewBag” 原因:web.config 配置错误 这种情况是因为两个web.config文件版本不匹配,需要进行修 ...

  2. Java代码中解压RAR文件

    import java.io.File; import java.io.FileOutputStream; import de.innosystec.unrar.Archive; import de. ...

  3. CSS面试题

    1.有哪些方式可以对一个DOM设置它的CSS样式? 外部样式表.引入一个外部CSS文件: 内部样式表.将CSS代码放在<head>标签内部: 内联样式,将CSS样式直接定义在HTML元素内 ...

  4. redis实战 -- python知识散记

    -- time.time() -- row.to_dict() -- json.dumps(row.to_dict()) #!/usr/bin/env python import time def s ...

  5. array_walk与array_map的区别

    1.array_walk是用于用户自定义的函数,所以想用array_walk($aIds, "trim");去掉数据元素中的空格是达不到目的的只能用array_walk($aIds ...

  6. 剑指offer题目java实现

    Problem2:实现Singleton模式 题目描述:设计一个类,我们只能生成该类的一个实例 package Problem2; public class SingletonClass { /* * ...

  7. 跨平台桌面程序框架Electron

    https://www.npmjs.com/ js库

  8. Java开发岗位面试题归类

    一.Java基础 1. String类为什么是final的. ( 1.由于String类不能被继承,所以就不会被修改,这就避免了因为继承引起的安全隐患: 2.String类在程序中出现的频率比较高,如 ...

  9. 《JavaScript》 程序基本知识 数据类型。 {0912上} {0912下}

    JS脚本语言: 这是JaxaScript的全称名 JS是网页里面使用的脚本语言 JS是一个非常强大的语言 JS的基础语法 注释语法:  单行注释 //     多行注释 /**/ 输出语法:   双标 ...

  10. JavaScript基础知识(初识JS)

    js的组成部分 1. ECMAScript : JS的基础语法 变量 数据类型,操作语句,函数 es3 es5 es6; 2.DOM : document object model : 文档对象模型: ...