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

2019独角兽企业重金招聘Python工程师标准>>>

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

问题产生的原因： 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;
}

转载于:https://my.oschina.net/u/3704598/blog/1560805