您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計(jì)教程 >> 移動(dòng)前端 >> 瀏覽設(shè)計(jì)教程

關(guān)于input里面的輸入光標(biāo)高度問題

手機(jī)移動(dòng)端項(xiàng)目里碰到過一個(gè)問題

input輸入框用一個(gè)背景圖模擬,設(shè)置height和line-height一樣的高度,使里面的輸入文字能夠居中,

在FF下出現(xiàn)的情況是:點(diǎn)擊input時(shí),輸入光標(biāo)其實(shí)上跟input的height一樣高,但當(dāng)開始輸入文字時(shí),光標(biāo)又變得跟文字一樣高,也就是光標(biāo)高度會(huì)變化的問題。

chrome下光標(biāo)跟input的height一樣高,

而IE下光標(biāo)跟文字的大小一致。

一直沒弄明白為什么這樣子,網(wǎng)上搜索了很多答案才知道原因所在。

初步結(jié)論如下:

IE:不管該行有沒有文字,光標(biāo)高度與font-size一致。

FF:該行有文字時(shí),光標(biāo)高度與font-size一致。該行無文字時(shí),光標(biāo)高度與input的height一致。

Chrome:該行無文字時(shí),光標(biāo)高度與line-height一致;該行有文字時(shí),光標(biāo)高度從input頂部到文字底部(這兩種情況都是在有設(shè)定line-height的時(shí)候),如果沒有l(wèi)ine-height,則是與font-size一致。

解決的方案:

給input的height設(shè)定一個(gè)較小的高度,然后用padding去填充,基本上可以解決所有瀏覽器的問題

input{
   height
: 16px;
   padding
: 4px 0px;
   font-size
: 12px;
}


[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://irelandcustomcontracting.com/tutorial/wd3262.html
你需要知道的9個(gè)移動(dòng)端用戶體驗(yàn)設(shè)計(jì)準(zhǔn)則
導(dǎo)致頁面頂部空白一行解決方法
圖趣網(wǎng)微信
建議反饋
×