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:4px 0; 
font-size:12px; 
} 

注：input有个outline属性我们不需要外边框就可以去掉outline:none，还有去掉border：none;这时候你会发现这个input和一个div一样很好调样式，已经被你征服~~

我在写input基本上会在input外面套上个div包着，div的大小和input一样，外面的div还可以设置许多样式，用户点击div其实是触发的是input.很好的解决了input的bug问题。

赏 支付宝扫码打赏 微信扫码打赏

如果本文对你有帮助，欢迎打赏本站