Вертикально центр текст ввода текста в IE9 + IE10

Question

пример здесь: http://jsfiddle.net/D7v2Y/

В Firefox/WebKit это прекрасно работает. Текст центрирован. Не в IE10 или IE9

input { 
    display: block; 
    box-sizing: border-box; 
    line-height: 50px; 
    height: 50px; 
    padding: 10px; 
} 

Что здесь происходит, и как я могу получить ввод текста для отображения „правильно“ с текстом по вертикали с центром в IE?

Спасибо!

Answer 1

Вам нужно примирить padding и line-height. С box-sizing: border-box они по сути сражаются за одну и ту же недвижимость.

Другими словами, вы говорите: «Установите 50px высоты линии в 50px полного вертикального пространства, а также наложите ее на 20 пикселей».

Простым решением является уменьшение line-height так, чтобы padding * 2 + line-height = 50px. Или, если вы хотите больше line-height, уменьшите прокладку. Если вы хотите оставить то же самое line-heightи отступом, увеличьте высоту до 70px.

Пример: http://jsfiddle.net/D7v2Y/11/

input { 
    display: block; 
    box-sizing: border-box; 
    line-height: 30px; 
    height: 50px; 
    padding: 10px; 
} 

Answer 2

отступы нарушает его в IE8, бог знает почему ....

просто удалить Обивка

Answer 3

Я добавил размер шрифта, и что, кажется, сделать трюк:

input { 
    display: block; 
    box-sizing: border-box; 
    line-height: 1.0; 
    font-size: 20px; 
    height: 50px; 
    padding: 10px; 
} 

немного странно ... но это, кажется, один из способов сделать Это.

Fiddle: http://jsfiddle.net/audetwebdesign/Y2rd4/

Box калибровочный

Я заметил, что свойство коробчатого размеров вычисляет различную высоту в IE10/9 по сравнению с Firefox. Если вы опустите это свойство, поле ввода отобразится аналогично.