input输入框中光标高度的变化问题

最近项目中遇到一些问题, 搜索框的光标高度在有输入内容和为空时发生很大变化。

问题产生的原因: 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 0px;
    font-size:12px;
}

猜你喜欢

转载自my.oschina.net/u/3704598/blog/1560805