在输入文本之前减小默认光标大小

Question

我有一些输入框从不同的浏览器得到不同的结果。这是盒子的css：

.InputBox
{
    background-image: url(../text_field.png);
    height: 25px;
    width: 192px;
    z-index:300;
    position:absolute;
    border: 0;
    padding: 0 0 0 3px;
    background-color:transparent;
    font-size: 12px;
}

我假设使光标与文本框的大小/位置相匹配，我只需要添加 padding 和 font-size 调用。不幸的是，这种情况并非如此。到目前为止，这是我在浏览器中遇到的问题

Chrome无

Safari无

IE8 光标太高，在输入文本之前不会显示在框的前面。文字不居中，但更靠近顶部

Firefox 未输入文本时光标过大。输入文本后，光标就可以了。如果文本被删除，光标会变大。

如何在 Firefox 中调整初始光标大小？我假设它会匹配font-size，但我想情况并非如此。还有，如何在IE中调整padding而不在其他中更改，为什么不输入文本时光标会出现在文本框后面？

Answer 1

这是我在 Firefox 4 中修复的错误。在 Firefox 4 中，光标大小始终是要输入的文本的大小。我们从 font-size 属性中获取该大小。在 Firefox 3.6 和更早的版本中，大小由包含光标的块的高度决定，如果它里面没有任何文本。