ie 下input光标位置垂直不居中问题
input输入框用一个背景图模拟,设置height和line-height一样的高度,使里面的输入文字能够居中,
在FF下出现的情况是:点击input时,输入光标其实上跟input的height一样高,但当开始输入文字时,光标又变得跟文字一样高,
chrome下光标跟input的height一样高,
而IE下光标跟文字的大小一致。
一直没弄明白为什么这样子,今天才知道为什么。
初步结论如下:
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:4px0px;
font-size:12px;
}
注:input有个outline属性我们不需要外边框就可以去掉outline:none,还有去掉border:none;这时候你会发现这个input和一个div一样很好调样式,已经被你征服~~
我在写input基本上会在input外面套上个div包着,div的大小和input一样,外面的div还可以设置许多样式,用户点击div其实是触发的是input.很好的解决了input的bug问题。
ie 下input光标位置垂直不居中问题的更多相关文章
- input光标位置
兼容谷歌火狐-input光标位置 input框在没有添加任何效果的情况下,输入文字后光标始终在最后的位置,谷歌||火狐效果一样 但是在给input加入点击事件后 谷歌:input框插入文字后,光标会自 ...
- Recoil Input 光标位置被重置到末尾的问题
考察如下代码,页面中有个输入框,通过 Recoil Atom 来存储输入的值. App.tsx function NameInput() { const [name, setName] = useRe ...
- input光标位置不居中问题
文本输入框默认在谷歌,火狐浏览器中,光标是居中显示的.但在IE7中一开始会在顶部闪烁(输入文字后光标居中),加上行高就可以,值为文本框的高度. 注意要加*号,否则在谷歌浏览其中光标会在顶部闪烁. *l ...
- 【转】移动端input输入placeholder垂直不居中
在移动端编写input输入框时候,为了输入文字与输入框垂直居中,一般情况下,会将input的line-height的高度等于height.但在移动端输入的时候会发现,虽然输入内容确实是垂直居中了,但是 ...
- 移动端input输入placeholder垂直不居中
在移动端编写input输入框时候,为了输入文字与输入框垂直居中,一般情况下,会将input的line-height的高度等于height.但在移动端输入的时候会发现,虽然输入内容确实是垂直居中了,但是 ...
- ie浏览器下input和select的上下居中问题!!!!
在Google浏览器下的input和select标签里面的文字是根据它的高度自适应上下居中的,而ie浏览器下的input和select里面的文字就不会根据高度自适应上下居中,跟大家分享一下我的解决方法 ...
- 解决只读时ios下input光标问题
应用场景:在ios手机下对只读的input设置readonly=readonly属性还是会出现光标 解决方法: //解决ios日期光标问题 $("#Stime ,#provinceCity& ...
- C#-WinForm-如何获取文本框(TextBox)中鼠标,光标位置
文本框(TextBox)中的鼠标位置和光标位置是两个不同的概念,鼠标位置是要点击鼠标后(NouseDown)获取到,而光标位置却是实时就要获取到,也就是用户输入一个字符(KeyUp),这个位置就要改变 ...
- 可编辑div中包含子元素时获取光标位置不准确的问题
前言: 高亮显示输入框中的关键字符,这就必须得用到可编辑div(或其他标签)元素了,这时我们需要获取光标的位置,以便插入字符. 正文: 正常情况下获取光标位置,代码如下: function getPo ...
随机推荐
- Flask 学习笔记(一)
一.Web 服务器与 Web 框架 首先明确一下,要运行一个动态网页,我们需要 一个 Web 服务器来监听并响应请求,如果请求的是静态文件它就直接将其返回,如果是动态 url 它就将请求转交给 Web ...
- 有向图的强连通分量——kosaraju算法
一.前人种树 博客:Kosaraju算法解析: 求解图的强连通分量
- VS2015中常用快捷键的修改推荐
首先,在VS2015中修改快捷键的步骤如下: 工具--选项--环境--键盘. 如图: 然后就是修改快捷键:(以下是个人的使用习惯,仅供参考) 1.编辑.设置选定内容的格式.设置为ctrl+E,Ctrl ...
- onkeypress,onkeyup,onkeydown区别
onkeypress 这个事件在用户按下并放开任何字母数字键时发生.系统按钮(例如,箭头键和功能键)无法得到识别. onkeyup 这个事件在用户放开任何先前按下的键盘键时发生. onkeydown ...
- el-table中操作一栏怎么根据当前行的信息显示编辑、删除、编辑完成按钮
对每个按钮是否显示,使用v-show绑定变量,因为每一行的v-show绑定的变量必须是唯一的(不然的话操作此行,其他行的状态也会跟着变化),所以不可能提前在.ts中对变量进行初始化,只能使用本行的字段 ...
- [Java] Java常见错误
1.处理java错误"编码 GBK 的不可映射字符" (1)首先记事本打开java源文件 (2)然后另存为,选择ANSI编码 (3)覆盖 (4)再试一下,ok,编译通过.
- typescript 贪吃蛇[学习过程中,模仿的一个例子]
代码实现ts: 1 'use strict' module Main { const FloorType = { space: "space", snack: "body ...
- 【bzoj4070】[Apio2015]雅加达的摩天楼 set+堆优化Dijkstra
题目描述 印尼首都雅加达市有 N 座摩天楼,它们排列成一条直线,我们从左到右依次将它们编号为 0 到 N−1.除了这 N 座摩天楼外,雅加达市没有其他摩天楼. 有 M 只叫做 “doge” 的神秘生物 ...
- Netscaler GSLB的主备数据中心解决方案
Netscaler GSLB的主备数据中心解决方案 http://blog.51cto.com/caojin/1898182 GSLB的主.备数据中心解决方案思路: 其实这只是多数据中心的一个特例而已 ...
- input checkbox 多选 验证
# input checkbox 多选 验证``` <ul class="orderMsg_radio"> <!--单选--> <input valu ...