Văn bản trung tâm theo chiều dọc trong nhập văn bản trong IE9 + IE10

Question

ví dụ tại đây: http://jsfiddle.net/D7v2Y/

Trong firefox/webkit, nó hoạt động rất tốt. Văn bản được căn giữa. Không có trong IE10 hoặc IE9

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

Điều gì sẽ xảy ra ở đây và làm cách nào để nhập văn bản hiển thị "chính xác" với văn bản được căn giữa trong IE?

Cảm ơn bạn!

Answer 1

Bạn cần phải hòa giải padding và line-height. Với box-sizing: border-box, chúng chủ yếu là chiến đấu cho cùng một bất động sản.

Nói cách khác, bạn đang nói "phù hợp với 50px chiều cao của đường vào 50px tổng không gian dọc, nhưng cũng có thể đặt nó bằng 20px".

Giải pháp đơn giản là giảm line-height để padding * 2 + line-height = 50px. Hoặc, nếu bạn muốn thêm line-height, hãy giảm phần đệm. Nếu bạn muốn giữ cùng một lớp lót line-heightvà, hãy tăng chiều cao lên 70px.

Ví dụ: http://jsfiddle.net/D7v2Y/11/

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

Answer 2

padding được phá vỡ nó trong IE8, thần chỉ biết tại sao ....

chỉ cần loại bỏ các padding

Answer 3

Tôi đã thêm một font-size và đó dường như làm các trick:

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

Một chút kỳ quặc ... nhưng nó có vẻ là một cách để làm nó.

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

Box Sizing

tôi nhận thấy rằng tài sản hộp-sizing tính một chiều cao khác nhau trong IE10/9 so với Firefox. Nếu bạn bỏ qua thuộc tính đó, trường nhập sẽ hiển thị tương tự hơn.