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; 
}