input上下居中问题

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，两个平台显示都还不错。

转载于:https://www.cnblogs.com/wang715100018066/p/6016387.html