Input CSS：空输入与包含内容的输入具有不同的行高？

对于某个站点来说，这并不是一个具体的问题，只是我似乎在每个项目中都忽略了这一点

如果你看看。在输入内部单击，插入符号延伸到输入的高度。现在按一个键，插入符号收缩到文本高度。是否有人：

a） 知道为什么会这样吗

---

b） 知道如何解决吗？

我不知道这是否值得，但如果你坚持在Firefox中解决这个问题，你可以这样做：

在焦点事件中，如果文本框的值为空字符串，则：

将值设置为

”

（空格字符）

将插入符号移动到文本框的开头

工作演示：

我正在使用自定义脚本设置选择。它位于这里：

selec.set（this，0，0）

将插入符号设置为文本框的开头

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

更新：

---

（这也可以处理用户反复聚焦空文本框的情况）

从我的观点来看，问题很简单，输入中的字体大小小于实际输入大小，因此如果您将字体设置为所需大小，这应该可以解决问题：

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

---

设置选项的固定高度为我固定了它

option
{
    height: 12px;
}

---

我没有看到你说的这个插入符号。它是特定于浏览器的吗？嗯，也许是，这是我所在的Firefox。我是说光标，闪烁的线条？我不知道还能用什么来形容它。这似乎是Firefox（可能是Webkit？）的怪癖。这在InternetExplorer8（Windows7）中是不会发生的，真奇怪。这有点奇怪。如果你将输入的字体大小设置为20，那么大小在整个过程中保持不变，但是文本从底部伸出。只在Firefox中发生，对我来说非常好，做得很好。我可能最终会使用这个，它似乎是唯一一个可以让你设置文本框高度而不需要过大插入符号的修复方法。我想这是我问题的b部分。@Wolfy87不过，如果你决定使用它，我建议你只在Firefox中运行代码。在Opera中插入符号的定位很晚（看起来很奇怪），而在Webkit浏览器（Chrome和Safari）中，上述代码似乎不起作用-这很奇怪，因为它在本演示中确实起作用：