最近在做项目忘记密码页面时,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. IntelJ idea下lombok 不生效的问题(@Builder等注解不生效的问题)解决,lombok Plugin插件安装

    插件安装方式,在设置setting 中找到plugins.在检索框中检索lom,没有的话点击红框内的search in repositories. 点击install进行安装. 记得安装好了重启ide ...

  2. ScheduledThreadPoolExecutor实现原理

    ScheduledThreadPoolExecutor实现原理 博客分类: concurrency java   自jdk1.5开始,Java开始提供ScheduledThreadPoolExecut ...

  3. tomcat 配置 使用综合

    [参考]Tomcat 7.0安装与配置 [参考]tomcat 控制台日志(startup.bat)输出到指定文件中 [参考]将Java web应用部署到Tomcat 及部署到Tomcat根目录 的三种 ...

  4. Jmeter4.X - 使用本身自带的脚本录制功能录制脚本

    1.前言 记录对Jmeter评估研究的过程,本文记录使用apache网站提供的原Jmeter使用自带功能进行脚本录制. 本文可用于面向B/S WEB应用测试的工程师熟悉Jmeter使用.章节安排按照脚 ...

  5. UNION ALL的用法

    " ?> -mapper.dtd" > <mapper namespace="com.j1.soa.resource.order.oracle.dao. ...

  6. Python实现代码统计工具——终极加速篇

    Python实现代码统计工具--终极加速篇 声明 本文对于先前系列文章中实现的C/Python代码统计工具(CPLineCounter),通过C扩展接口重写核心算法加以优化,并与网上常见的统计工具做对 ...

  7. nuxt二级路由

    耗费了大半天的时间,终于把页面的二级路由配置好了 先看我的目录 如果没有登陆页,根本就不用考虑嵌套路由的问题,主要的menu跳转和<nuxt />可以直接写到layouts/default ...

  8. Spring的事务管理基础知识

    1.数据库事务基础知识     1)数据库事务有严格的定义,它必须同时满足4个特性:原子性(Atomic).一致性(Consistency).隔离性(Isolation)和持久性(Durability ...

  9. 补充:javascript

    写法分类:1.行内(内联)写在标签里面,以属性的形式表现,属性名是事件属性名例如:<button onClick="js代码"></button>2.内嵌写 ...

  10. 1 创建一个存储过程,以及对存储过程的调用 MySQL

    1  首先创建一张tb1表  sql语句如下 CREATE TABLE `tb1` (  `Id` int(11) NOT NULL AUTO_INCREMENT,  `age` int(11) DE ...