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.

Answer 4

Вы можете использовать высоту строки в качестве высоты вашего текстового поля.