input输入框中的光标大小显示不一致的解决方法

ttx9n · 发表于 2014-9-10 17:44:23

chrome浏览器对光标高度的设置原则为，当没有内容的时候光标的高度=input的line-height的值，当有内容时，光标从input的顶端到文字的底部 input输入框中的光标大小显示不一致

ie7中和chrome的非常明显

先看看问题产生的原因：chrome浏览器对光标高度的设置原则为，当没有内容的时候光标的高度=input的line-height的值，当有内容时，光标从input的顶端到文字的底部。

OK，既然知道了原因，我们就相应才去一些措施。尝试了两种方法去做:。

方法1：将line-height的值设置为跟字体大小一致；如果高度达不到，用padding去撑；

方法2：对chrome不设置line-height，它会自动文字居中，对ie进行hack设置line-height的值以保证文字垂直居中；这里要注意一下，如果在reset的样式文件中有设置line-height等值，请进行line-height的重置，可以用line-height:normal。具体可以看看腾讯好莱坞页面的搜索框。

具体css：

复制代码代码如下:
height: 34px;
font-size: 12px;
line-height: normal;
line-height: 34px\9;

q42obh · 发表于 2022-11-18 18:27:19

搞个免费的用用

.l4 · 发表于 2022-12-18 09:37:38

而快乐你们快乐马年快乐

kestlhoxn · 发表于 2023-1-4 03:26:21

谢谢楼主分享

errol123 · 发表于 2023-3-3 11:35:27

刷屏刷屏刷屏

zzhxxx · 发表于 2023-3-14 13:38:13

还可以不错

qq303604905 · 发表于 2023-4-8 09:18:32

源码源码源码源码源码源码源码源码源码源码源码源码源码

x20yd3qx · 发表于 2023-5-11 14:11:31

还有什么好东西没

0vwrdf6 · 发表于 2023-7-30 08:45:33

很不错的源码论坛

hd1tvqb3 · 发表于 2023-8-1 11:46:42

sdsadsadsadf

账号		自动登录	找回密码
密码			立即注册

[HTML/Xhtml] input输入框中的光标大小显示不一致的解决方法

相关帖子