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，兩個平臺顯示都還不錯。