CSS：空輸入具有與輸入內容不同的行高度？

Question

這不是某個網站的特定問題，只是我似乎在之間每項目。

如果你看看here。在輸入內部單擊，插入符號將伸展到輸入的高度。現在按一個鍵，插入符號縮小到文本高度。有誰：

一）知道爲什麼會這樣

B）知道如何解決它？

Answer 1

我不知道，如果它是值得的，但如果你堅持固定在Firefox這個問題，你可以這樣做：

在焦點事件，如果文本框的值是一個空字符串，那麼：

1. 值設置爲" "（空格字符）
2. 將光標移動到文本框

的開始工作演示：http://jsfiddle.net/U2TPK/11/

我正在使用自定義腳本來設置選擇。它位於：http://vidasp.net/js/selection.js
selec.set(this, 0, 0)將插入符號設置爲文本框的開頭。

$("input:text").focus(function() { 
    if (this.value.length === 0) { 
     this.value = " "; 
     selec.set(this, 0, 0); 
    } 
}); 

更新：http://jsfiddle.net/U2TPK/12/
（這還處理當用戶反覆聚焦空文本框的情況）

Answer 2

從我的角度來看這個問題很簡單，字體大小裏面輸入比實際輸入尺寸小，所以這應該修復它，如果你的字體設置爲所需的大小：

input { 
    background: none; 
    border: none; 
    padding: 0; 
    margin: 0; 
    border: 1px solid #CCCCCC; 
    height: 20px; 
    width: 200px; 
    font-size:20px; 
} 

或者你可以使用：

input { 
    background: none; 
    border: none; 
    padding: 0; 
    margin: 0; 
    border: 1px solid #CCCCCC; 
    height: 15px; 
    width: 200px; 
    line-height:20px; 
} 

Answer 3

設置一個固定高度的選項爲我固定它。

option 
{ 
    height: 12px; 
}