texto vertical-align en este cuadro de entrada para IE

Question

tengo this código:

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

y me gustaría vertical de alinearlo. Firefox y Chrome lo hacen automáticamente (como IE9). Con IE8 o 7 está en la parte superior.

¿Cómo puedo hacerlo con CSS?

Answer 1

Suponiendo que quiere decir alineación vertical en el centro, puede usar la propiedad CSS line-height para hacer esto. Simplemente configure que sea el mismo que el height del elemento.

Answer 2

Hay un problema con la altura de línea en Chrome. Cuando altura en línea == altura, entonces Chrome en el cuadro de edición de selección muestra un cursor grande. Cuando empiezas a escribir, el cursor disminuye. La solución posible es usar los rellenos (parte superior & inferior). En su caso:

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

Answer 3

Para webkit, es mejor usar almohadillas para evitar el cursor gigante, así.

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;