input上下居中问题

时间:2023-02-01 06:49:34

IE:不管该行有没有文字,光标高度与font-size一致。
FF:该行有文字时,光标高度与font-size一致。该行无文字时,光标高度与input的height一致。
Chrome:该行无文字时,光标高度与line-height一致;该行有文字时,光标高度从input顶部到文字底部(这两种情况都是在有设定line-height的时候),如果没有line-height,则是与font-size一致。

故而,在设置input高度的时候,尽量用padding使其上下居中,可以避免兼容性问题,

input,textarea{font-size:1rem;height:1rem;padding:2rem 0;}

注意:input是属于inline-block的标签,所以有高度,高度要和font-size的值一致;不用给line-height;

line-height的兼容问题不太好解决,容器高度越小,显示效果的差距越明显。稍微大一点的高度,最好把line-height设置为高度+1px,两个平台显示都还不错。