明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

input輸入框中的光標大小顯示不一致應(yīng)該怎么處理

發(fā)表時間：2024-05-06 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]這次給大家?guī)韎nput輸入框中的光標大小顯示不一致應(yīng)該怎么解決，解決input輸入框中的光標大小顯示不一致的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。input輸入框中的光標大小顯示不一致 ie7中和chrome的非常明顯 先看看問題產(chǎn)生的原因：chrome瀏覽器對光標高度的設(shè)置原則為，當...
這次給大家?guī)韎nput輸入框中的光標大小顯示不一致應(yīng)該怎么解決，解決input輸入框中的光標大小顯示不一致的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。

input輸入框中的光標大小顯示不一致
ie7中和chrome的非常明顯
先看看問題產(chǎn)生的原因：chrome瀏覽器對光標高度的設(shè)置原則為，當沒有內(nèi)容的時候光標的高度=input的line-height的值，當有內(nèi)容時，光標從input的頂端到文字的底部。
OK，既然知道了原因，我們就相應(yīng)才去一些措施。嘗試了兩種方法去做:。
方法1：將line-height的值設(shè)置為跟字體大小一致；如果高度達不到，用padding去撐；
方法2：對chrome不設(shè)置line-height，它會自動文字居中，對ie進行hack設(shè)置line-height的值以保證文字垂直居中；這里要注意一下，如果在reset的樣式文件中有設(shè)置line-height等值，請進行l(wèi)ine-height的重置，可以用line-height:normal。具體可以看看騰訊好萊塢頁面的搜索框。
具體css：

height: 34px; 
font-size: 12px; 
line-height: normal; 
line-height: 34px\9;

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

HTML中head頭結(jié)構(gòu)應(yīng)該如何使用

HTML的head頭標簽有哪些用法

怎樣利用iframe讓自己的網(wǎng)頁可以顯示天氣

以上就是input輸入框中的光標大小顯示不一致應(yīng)該怎么解決的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。