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

时间 2019-11-12

标签 input 输入光标高度变化问题繁體版

原文原文链接

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

问题产生的缘由： IE：无论该行有没有文字，光标高度与font-size一致。 FF：该行有文字时，光标高度与font-size一致。该行无文字时，光标高度与input的height一致。 Chrome：该行无文字时，光标高度与line-height一致；该行有文字时，光标高度从input顶部到文字底部(这两种状况都是在有设定line-height的时候)，若是没有line-height，则是与font-size一致。code

解决的方案：给input的height设定一个较小的高度，而后用padding去填充，基本上能够解决全部浏览器的问题input

input{
    height:16px;
    padding:4px 0px;
    font-size:12px;
}