最近在做项目忘记密码页面时,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. Maven私服(Repository Manager) - Nexus安装和使用(详细过程)

    Maven私服的安装和使用. (注:原创文章,引用请注明来自Clement-Xu的博客!) Maven私服(即Repository Manager)的主要作用: 减少从远方仓库下载的次数,节省带宽.提 ...

  2. dedecms模板中 if else怎么写

    在制作dedecms模板时,有时需要使用IF  ELSE判断语句,但是dedecms模板中是无法使用使用IF语句的,否则会报错. 那么如何在dedecms模板中使用 if else呢?这就需要我们多走 ...

  3. redis主从同步配置

    主服务器无需操作,从服务器 SLAVEOF 主服务器IP 端口 即可. 断开主从,执行 SLAVEOF NO ONE 即可. 同事和我在内网配置了连内网测试的服务器可以执行,但是连对方的不行,开始以为 ...

  4. npm install 错误 安装 chromedriver 失败的解决办法

    npm 安装 chromedriver 失败的解决办法npm 安装 chromedriver 时,偶尔会出错,错误提示类似于:npm ERR! chromedriver@2.35.0 install: ...

  5. 启动Mysql数据库报错误:-bash: ./start.sh: Permission denied

    linux下安装好Mysql数据库后,输入启动命令: cd /home/homework/mysql && ./start.sh 回车后报如下错误: 原因是:该文件未有相关执行权限 解 ...

  6. Palindromic Matrix

    Palindromic Matrix time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  7. switch(值){ 开始case 值: 闭合break; }

    switch ($goods['leixing']) { case 1: $data['type'] = 1; $data['orderid'] = 'PT' . rand(000000, 99999 ...

  8. 学习完HTML后的5大测试题----9.18

    考试题目   第一题: 布局出该效果 提示:使用DIV的border样式,调整边框粗细出现该效果,保留上边框,其它三个方向的边框需设置:border-left:100px solid transpar ...

  9. phpredis中文开发文档

    刚好要用看了网上翻译版本都是2011,2012年的,随手翻译一下新版 2017年10月28日23:48:08 使用方法 : Ctrl+F 官方英文版 https://github.com/phpred ...

  10. WebService,ESB笔记

    一.WebService是什么? WebService,是RPC的一样实现方式. RPC(Remote Procedure Call Protocol)--远程过程调用协议,它是一种通过网络从远程计算 ...