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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM