溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關如何調整input里面的輸入光標大小并兼容主流瀏覽器，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
在項目里碰到過一個問題
input輸入框用一個背景圖模擬，設置height和line-height一樣的高度，使里面的輸入文字能夠居中，如下圖： 
在FF下出現的情況是：點擊input時，輸入光標其實上跟input的height一樣高，但當開始輸入文字時，光標又變得跟文字一樣高，
chrome下光標跟input的height一樣高，
而IE下光標跟文字的大小一致。
初步結論如下：
IE：不管該行有沒有文字，光標高度與font-size一致。
FF：該行無文字時，光標高度與input的height一致。該行有文字時，光標高度與font-size一致。(最新版的好像和ie一樣了)
Chrome：該行無文字時，光標高度與line-height一致；該行有文字時，光標高度從input頂部到文字底部(這兩種情況都是在有設定line-height的時候)，如果沒有line-height，則是與font-size一致。
解決辦法：
1，給input的height設定一個較小的高度，然后用padding去填充，基本上可以解決所有瀏覽器的問題
代碼如下:
input{
height: 16px;
padding: 4px 0px;
font-size: 12px;
}
2，只給IE line-height就可以了。
代碼如下:
-ms-line-height:40px;
看完上述內容，你們對如何調整input里面的輸入光標大小并兼容主流瀏覽器有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
