input光标大小
最近在做项目忘记密码页面时,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光标大小的更多相关文章
- input光标高度问题
input输入框光标高度问题IE:不管该行有没有文字,光标高度与font-size大小一致 FF:该行没有文字时,光标大小与input的 height 大小一致:该行有文字时,光标大小与font-si ...
- input长度随输入内容动态变化 input光标定位在最右侧
<input type="text" onkeydown="this.onkeyup();" onkeyup="this.size=(this. ...
- input 光标在 chrome下不兼容 解决方案
input 光标在 chrome下不兼容 解决方案 height: 52px; line-height: normal; line-height:52px\9 .list li input[type= ...
- 隐藏input光标和输入内容方法
text-indent: -999em; // 隐藏input文字margin-left: -100%;// 隐藏input光标
- input光标位置
兼容谷歌火狐-input光标位置 input框在没有添加任何效果的情况下,输入文字后光标始终在最后的位置,谷歌||火狐效果一样 但是在给input加入点击事件后 谷歌:input框插入文字后,光标会自 ...
- IOS中input光标跑偏问题的解决方法
ios端兼容input光标高度处理 在最近的项目中遇到一个问题,input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上 当点击输入的时候,光标的高度和父盒子的高度一样.造成的原因就是给父盒子 ...
- 关于调整input里面的输入光标大小
input输入框用一个背景图模拟,设置height和line-height一样的高度,使里面的输入文字能够居中, 在FF下出现的情况是:点击input时,输入光标其实上跟input的height一样高 ...
- ie 下input光标位置垂直不居中问题
input输入框用一个背景图模拟,设置height和line-height一样的高度,使里面的输入文字能够居中, 在FF下出现的情况是:点击input时,输入光标其实上跟input的height一样高 ...
- 苹果手机iOS11中fixed弹出框中input光标错位问题
最近遇到了一个移动前端的BUG:手机弹出框中的输入框focus时光标可能会错位. 刚开始时我完全不知道错误原因是什么,在电脑上调试时完全没有问题,手机上出现问题时也没有找到规律.后来在网上搜索了大量的 ...
随机推荐
- centos7下使用docker安装nginx
需要环境docker,此处不做介绍. 1. docker拉取官方nginx镜像 docker pull nginx 2. 等待下载完成后,我们就可以在本地镜像列表里查到 REPOSITORY 为 ng ...
- Java开发工程师面试题1
时间2019-1-2 地点上海 package service; import java.text.SimpleDateFormat; import java.util.Date; public cl ...
- Java开发中的23种设计模式
设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了 ...
- node-log4js3.0.6配置
const log4js = require('log4js'); const conf = { "appenders": { "access": { &quo ...
- LeetCode - 766. Toeplitz Matrix
A matrix is Toeplitz if every diagonal from top-left to bottom-right has the same element. Now given ...
- poj3087 Shuffle'm Up(模拟)
Shuffle'm Up Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 10766 Accepted: 4976 Des ...
- JAVA课程课后作业之使用递归完成回文
一.思路 1.我的想法是利用数组的做法来进行,先是用scanner录入一个String类 2.然后就是将String转化成char数组 3.递归的就是第一个和最后一个对比,然后第一个加一,最后一个减一 ...
- 前端上传 base64 编码图片到七牛云存储
参考文档 如何上传base64编码图片到七牛云 调试过程 文档中分别有 java 和 html 的 demo,可以根据文档示例调试. 下面是我调试的过程,可以作为参考,特别注意的是,如果需要给文件起名 ...
- django 初始命令
1.安装django pip3 install django 2.创建一个Django对象 django-admin.py startproject 项目名称 django-admin.py star ...
- height:100%
子元素的高度设置为height:100%时 继承父元素的高度为border+height 子元素的高度为height: 此时父元素的 box-sizing:content-box: border-bo ...