IE6 and IE7 Input padding CSS

Question

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

How may I resolve this? Adding padding-top increased the total height of the input as I have explicitly declared its height.

I don't wish to use browser specific CSS.

Thanks.

Answer 1

最简单的解决方法是使用行高值

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

Answer 2

Related issue: Chrome will do the same thing.

Solution: Decrease the height by x pixels and increase padding-top by x pixels.

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 3

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

If the input form height is 50px then use the above code. Note the * hack for IE6 and IE7.

Answer 4

您可以使用行高作为文本框的高度。