IE6和IE7輸入填充CSS

Question

我有高度爲25像素的輸入框。在Firefox中，Safari和IE8會自動垂直對齊中間的文字。 但是，在IE6和IE7中，文本排列在頂部。

我該如何解決這個問題？因爲我已經明確聲明瞭高度，所以添加填充頂部會增加輸入的總高度。

我不想使用瀏覽器特定的CSS。

謝謝。

Answer 1

相關問題：Chrome會做同樣的事情。

解決方案：減小height通過x像素和由x像素增加padding-top。

例如。

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

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

如果輸入形式高度50px然後使用上面的代碼。請注意，針對IE6和IE7的*攻擊。

Answer 3

最簡單的辦法是使用的line-height值例如

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

Answer 4

可以使用的行高爲你文本框的高度。