IE6和IE7输入填充CSS

Question

我的输入框高度为25像素。在Firefox中，Safari和IE8会自动垂直对齐中间的文本。 但是在IE6和IE7中，文本与顶部对齐。

我该如何解决这个问题？添加padding-top会增加输入的总高度，因为我已经明确地声明了它的高度。

我不希望使用特定于浏览器的CSS。

感谢。

Answer 1

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

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

Answer 2

相关问题：Chrome会做同样的事情。

解决方案：将height减少x像素，并将padding-top增加x像素。

例如

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*/
}

如果输入表单高度为50px，请使用上面的代码。注意IE6和IE7的* hack。

Answer 4

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