Question

对于某个网站来说，这不是一个特定的问题，只是我似乎在每个项目中的东西。

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

a）知道为什么会发生这种情况

b）知道如何修复它吗？

Answer 1

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

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

将值设置为" "（空格字符）
将插入符号移动到文本框的开头

工作演示：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;
}

CSS：空输入与内容输入的行高不同？

3 个答案: