Google Chrome input 设置 line-height 后光标变得和input一样高
生活随笔
收集整理的這篇文章主要介紹了
Google Chrome input 设置 line-height 后光标变得和input一样高
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Google Chrome input的height和line-height設置為相同的比默認高度高的值時，當input控件獲得焦點并且沒有輸入內容時，input中的光標會占滿整個input控件（如果設置了padding-top或padding-bottom則會低于整個控件的高度），但輸入內容后光標高度又馬上恢復為字體的高度，效果圖和案例代碼如下，那么怎么解決這個問題呢？
<!DOCTYPE html> <html><head><title>line-height</title><meta charset="utf-8" /><style>*{outline:none;}body,input,textarea,button{font-size:200%;font-family:arial;}input{height:2.4em;line-height:2.4em;padding:0 0.1em;}</style></head><body><input type="text" placeholder="想輸入什么？" autofocus /></body> </html>Google Chrome input line-height Bug 解決方案
- 去掉 inline-height 屬性，但這會導致IE6/7/8瀏覽器中input的光標偏移到input左上方，在標準瀏覽器(特指Google Chrome, Firefox, Opera, Safari, IE 9+)中，如果對input設置了height，而沒有設置line-height，瀏覽器會自動使input中的內容和光標垂直居中對齊，而且光標的高度和字的高度一樣。IE8及更早版本非標準，必須將height和line-height設置為相同的值才能使input中的內容垂直居中對齊，這樣修正了一個瀏覽器，卻弄壞了更多瀏覽器，真是得不償失，請看下面的完美解決方案。
- 增加一條樣式 input[type="text"]:focus{line-height: normal}，這會導致IE8中input光標偏移到input左上方，IE6/7/9及更新版本正常顯示。只要再加上一條CSS hack，即可解決問題，實現所有主流瀏覽器兼容：input[type="text"]:focus{line-height: normal; line-height: 2.4em\9;}，其中的2.4em就是最初設置的值。
- Google Chrome 39已經修正了這個BUG，這才是最完美的解決方案。
轉載于:https://www.cnblogs.com/blosaa/p/4911143.html
總結
以上是生活随笔為你收集整理的Google Chrome input 设置 line-height 后光标变得和input一样高的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： nova战队谁开的 OpenStack
- 下一篇： i茅台客户端