Input text at the bottom on IE10

Question

Why is my input text rendered at the bottom of the input on IE10? FF and Chrome renders it in the middle as it's supposed to be.

http://jsfiddle.net/PXN2e/2/

input.form-text {
    color: #999999;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    padding: 6px 10px;
    width: 150px;
}
button, input, select, textarea {
    box-sizing: border-box;
    font-family: inherit;
    font-size: 100%;
    margin: 0;
    max-width: 100%;
    vertical-align: baseline;
}

Please don't say that the only solution is by removing the box-sizing: border-box;, I actually need this. And removing it, the input box becomes too big anyway.

enter image description here

score 2 · Accepted Answer · answered May 29 '14 at 14:54

2

Remove line-height from input.form-text

input.form-text {
    color: #999999;
    font-size: 14px;
    height: 30px;
    /*line-height: 30px;*/ /* Removed */
    padding: 6px 10px;
    width: 150px;
}

Demo

answered May 29 '14 at 14:54

Dhaval Marthak

17,246
6
46
68

Solved! And I read somewhere that I had to use line-height with height so it would align with the button in same line. – Optimus Prime May 29 '14 at 14:59
@OptimusPrime You can see [this](http://stackoverflow.com/questions/7616618/height-vs-line-height-styling) as a ref :) – Dhaval Marthak May 29 '14 at 15:03

score 1 · Answer 2 · answered May 29 '14 at 14:57

If you are giving a line-height, then remove the top/bottom padding:

Demo: http://jsfiddle.net/abhitalks/PXN2e/7/

CSS:

input.form-text {
    color: #999999;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    padding: 0px 10px; /* <-- Remove top/bottom padding */
    width: 150px;
}

line-height will vertically align to the height if specified. So, adding extra padding may cause such problems. Moreover, you don't have to carefully calc the top/bottom padding to vertically align.

score 0 · Answer 3 · answered May 29 '14 at 15:01

0

You can leave your line-height but just reconsile with the padding you added:

30px - 6px -6px = 18px

line-height: 18px

answered May 29 '14 at 15:01

Riskbreaker

4,621
1
23
31

Input text at the bottom on IE10

3 Answers3

Demo