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

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 Cursor WAY to high，在输入文本之前不会显示在框前面。文本未居中，但更靠近顶部

Firefox 没有输入文本时光标太大。输入文本后，光标就可以了。如果删除文本，光标会变大。

如何在 Firefox 中调整初始光标大小？我原以为它会匹配 font-size，但我想事实并非如此。另外，如何在 IE 中调整 padding 而不改变它，为什么在没有输入文本时光标会出现在文本框后面？

Answer 1

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