最近再做一個專案，發現input輸入框內的游標有點怪異：不輸入文字的時候，游標不處在input框的上下居中位置，而是偏上，當輸入文字以後就變為正常了，開始我以為是瀏覽器的原因，但後來到各個瀏覽器檢視一番，發現還真有點不同，於是百度了一下，找到了相關的文件讀了讀，才發現其中奧祕。

在Chrome瀏覽器中，當設定了line-height時，input無文字，游標高度與line-height一致；input有文字，游標高度從input頂部到文字底部。當沒有設定line-height時，則是與font-size一致。

想讓游標居中的解決方案是：讓input的高度等於裡面文字的高度，然後用padding把框撐起來，這樣游標的高度和位置就固定了。

如：

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

其實就是使用了padding來解決了，具體多少大家可以修改4px這個引數了調整了。（測試有效）