Incorrect vertical alignment in IE8

Question

The default text in my search box looks fine in Chrome, FF, and Safari (vertical-align: middle).

However, the default text rises to the top of the search box in IE 8.

Is there a workaround for IE? Thanks for your help.

HTML:

<input type="text" class="text" value="Search" title="Search" />

CSS:

.text {
    height: 47px;
    font-size: 18px;
    margin: 0; 
    padding: 0 5px 0 45px;
}

Answer 1

Have you tried setting the line height to match the height of the text box? The text should automatically appear in the middle of the line

Answer 2

Specifying line-height causes the cursor to grow very tall in Chrome , i will suggest to use equal padding from top/bottom to vertically align text in IE8, it will work in Chrome/FF/IE8