Pionowo centrum tekst w wprowadzania tekstu w IE9 + IE10

Question

przykład tutaj: http://jsfiddle.net/D7v2Y/

w Firefox/WebKit to działa świetnie. Tekst jest wyśrodkowany. Nie w IE10 lub IE9

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

Co się dzieje tutaj i jak mogę uzyskać wprowadzania tekstu, aby wyświetlić «poprawnie» z tekstem pionowo wyśrodkowany w IE?

Dziękujemy!

Answer 1

musisz pogodzić padding i line-height. Z numerem box-sizing: border-box zasadniczo walczą o tę samą nieruchomość.

Innymi słowy, mówisz "Dopasuj 50 pikseli wysokości linii do 50 pikseli całkowitej pionowej przestrzeni, ale także doprowadź ją do rozmiaru 20 pikseli".

Prostym rozwiązaniem jest zmniejszenie wartości line-height, aby padding * 2 + line-height = 50px. Lub, jeśli chcesz więcej line-height, zmniejsz dopełnienie. Jeśli chcesz zachować takie same wypełnienie, zwiększ wysokość do 70 pikseli.

Przykład: http://jsfiddle.net/D7v2Y/11/

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

Answer 2

wyściółka łamie go w IE8, bóg tylko wie dlaczego ....

prostu usunąć wyściółka

Answer 3

dodałem rozmiar czcionki i które wydają się rade:

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

nieco dziwne ... ale wydaje się być jednym ze sposobów to.

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

Box Dobór

Zauważyłem, że właściwość box-wymiarowania oblicza inną wysokość w IE10/9 w porównaniu do Firefoksa. Jeśli pominiesz tę właściwość, pole wejściowe będzie renderować bardziej podobnie.