解决input输入光标不一致粗细！

今天有人问了谷歌和火狐下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: 16px; 
padding: 4px 0px; 
font-size: 12px; 
}

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

解决input输入光标不一致粗细！

时间： 2024-10-12 21:46:33

解决input输入光标不一致粗细！的相关文章

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

以前在项目里碰到过一个问题 input输入框用一个背景图模拟,设置height和line-height一样的高度,使里面的输入文字能够居中, 在FF下出现的情况是:点击input时,输入光标其实上跟input的height一样高,但当开始输入文字时,光标又变得跟文字一样高, chrome下光标跟input的height一样高, 而IE下光标跟文字的大小一致. 一直没弄明白为什么这样子,今天听罗浮宫里的同学一讨论,才知道原因所在. 初步结论如下: IE:不管该行有没有文字,光标高度与font-si

关于INPUT 的光标的问题

input{ height: 16px; padding: 4px 0px; font-size: 12px; } 以前在项目里碰到过一个问题 input输入框用一个背景图模拟,设置height和line-height一样的高度,使里面的输入文字能够居中, 在FF下出现的情况是:点击input时,输入光标其实上跟input的height一样高,但当开始输入文字时,光标又变得跟文字一样高, chrome下光标跟input的height一样高, 而IE下光标跟文字的大小一致. 一直没弄明白为什么这样

限制input输入类型(多种方法实现)

转自 http://blog.csdn.net/txqd1989/article/details/51697585 1.只能输入和粘贴汉字 <input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))

正则及JS限制input输入类型

1.只能输入和粘贴汉字 <input onkeyup="value=value.replace(/[^u4E00-u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^u4E00-u9FA5]/g,''))"><br/> 3.只能输入和粘贴数字 <input onkeyup="this

Ubuntu安装Sublime并解决中文输入问题

1添加源 sudo add-apt-repository ppa:webupd8team/sublime-text-2 2安装sublime sudo apt-get update sudo apt-get install sublime-text 3.解决中文输入问题 3.1保存下面的代码到文件sublime_imfix.c /*sublime-imfix.cUse LD_PRELOAD to interpose some function to fix sublime input metho

移动端H5 input输入完成后页面底部留白问题

背景: H5页面在微信上展示,不管是在弹窗上的或者页面在偏底部位置的input输入完成之后点击键盘的完成,页面底部留出一片空白的问题 出现原因分析 当键盘抬起时,window.scrollY会从0变到键盘的高度,所以解决办法就是当input失去焦点的时候,将window.scrollY重新设置为点击之前的页面的高度(一般window.scrollTo(0,1000000)是可以解决大多数情况) 解决方案1: 核心代码: let currentY = 0; focus(){ currentY = 

【转】unity3d input输入

Input 输入 按键 Input.GetKey(“up”) = Input.GetKey(KeyCode.UpArrow) 按住键盘上键 Input.GetKeyDown (“up”) 按下键盘上键 Input.GetKeyUp (“up”) 放开键盘上键 (KeyCode.UpArrow)为键码 Input.GetButton(“ ”) = Input.GetKey(“ ”) 两种几乎相同(目前没发现差异) Input.GetButton一样会有分Input.GetButtonDown & 

C#/VB.NET Winform程序自定义输入光标

本文转载自真有意思网(http://www.zu14.cn) 作者:三角猫 DeltaCat摘要:C#/VB.NET Winform程序自定义输入光标的实现,我们可以通过调用Windows 提供的一套对输入光标进行控制的API进行操作...... Windows 提供了一套对输入光标进行控制的API, 包括:CreateCaret,SetCaretPos,DestroyCaret,ShowCaret,HideCaret.这些API的定义如下: [DllImport("user32.dll&quo

[C#]回车键实现输入光标的切换及系统快捷键的屏蔽

利用回车键将输入光标切换到下一个输入框以及系统快捷键Ctrl+C.V.X的屏蔽 private void textBox2_KeyDown(object sender, KeyEventArgs e) {     if ( e.KeyValue == (char)Keys.Enter )     {         SendKeys.Send("{TAB}");//将回车键转换为Tab键  也可以让下一个文本输入框获得焦点(txt.Focus())来实现               }