今天小编跟大家讲解下有关调整input里面的输入光标大小并兼容主流浏览器 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关调整input里面的输入光标大小并兼容主流浏览器 的相关资料,希望小伙伴们看了有所帮助。
在项目里碰到过一个问题 input输入框用一个背景图模拟 设置height和line-height一样的高度 使里面的输入文字能够居中 如下图: 在FF下出现的情况是:点击input时 输入光标其实上跟input的height一样高 但当开始输入文字时 光标又变得跟文字一样高 chrome下光标跟input的height一样高 而IE下光标跟文字的大小一致。 初步结论如下: IE:不管该行有没有文字 光标高度与font-size一致。 FF:该行无文字时 光标高度与input的height一致。该行有文字时 光标高度与font-size一致。(最新版的好像和ie一样了) Chrome:该行无文字时 光标高度与line-height一致;该行有文字时 光标高度从input顶部到文字底部(这两种情况都是在有设定line-height的时候) 如果没有line-height 则是与font-size一致。 解决办法: 1 给input的height设定一个较小的高度 然后用padding去填充 基本上可以解决所有浏览器的问题 复制代码代码如下: input{ height: 16px; padding: 4px 0px; font-size: 12px; } 2 只给IE line-height就可以了。 复制代码代码如下: -ms-line-height:40px;来源:爱蒂网