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