IE6 and IE7 Input padding CSS

Question

I have input fields with a height of 25 pixels. In Firefox, Safari and IE8 automatically vertically align text in the middle correctly. However, in IE6 and IE7, the text is aligned up.

How can i solve this? Adding padding-top increased the overall height of the input as I explicitly declared its height.

I do not want to use CSS for the browser.

Thank.

Answer 1

A related issue: Chrome will do the same.

Decision. Reduce pixels heightby xand increase padding-topby xpixels.

eg.

input { 
    height: 15px; /* roughly 1.2 times font-size, or equal to line-height if set */
    padding: 5px 0; /* add padding to top and bottom to pad out the height to required height */
}

Answer 2

The easiest fix is ​​to use a line height value like

input[type=text] { border: 1px solid #dbdbdb; height: 28px; line-height: 25px; }

Answer 3

.input{
    height:50px;
    color:#F00;
    vertical-align:middle;
    *padding-top:20px;/*IE7 and IE6*/
    *height:30px;/*IE7 and IE6*/
}

50px, . * IE6 IE7.

Answer 4

you can use line height as the height of your text field.