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，這才是最完美的解決方案。