如何在IE的此输入框上垂直对齐文本

Question

我有this代码：

<input type="text" class="contactInput" value="my string">

.contactInput
{
    border:0;
    margin:0;
    padding:0;
    background-color:#000000;
    color:#ffffff;
    height:22px;
    width:290px;
    padding-left:5px;
}

我想垂直对齐它。 Firefox和Chrome会自动执行（如IE9）。 IE8或7位于顶部。

我如何使用CSS？

Answer 1

假设您的意思是在中心垂直对齐，您可以使用line-height CSS属性来执行此操作。只需将其设置为与元素的height相同即可。

Answer 2

Chrome中的行高存在问题。当内联高度==高度时，选择编辑框上的铬显示大光标。当你开始键入光标减少。可能的解决方案是使用填充（顶部和底部）。在你的情况下：

height: 18px;
padding-top: 4px;

Answer 3

对于webkit，最好使用填充来避免巨型光标，就像那样。

  line-height: 14px/*to enclose 13px font, override this if needed*/;
  height: 14px/*to enclose 13px font, override this if needed*/;
  /*Padding is needed to avoid giant cursor in webkit, which we get if
  height = line-height = 22px.*/
  padding: 6px 8px;