Padding of Text Input in Internet Explorer 11 does not work as expected

Question

In our web application we have input fields, which are styled by css.

As you can see in the screenshot, the styling works in Firefox (info data taken from Firebug), it also works in Google Chrome.

But in IE 11 the same field has this padding problem. The word "test" is not centered vertically.

So far I have tried without success:

box-sizing: border-box
extra line-height attribute
overflow-visible attribute
vertical-align

Thanks alot in advance

Edit:

I included a minimal CSS reset (https://perishablepress.com/a-killer-collection-of-global-css-reset-styles/), but it did not change.

I also included a screenshot from the ie developer tools. You can see all style definitions which take effect on the input field. I see no conflicting other style definition.

Edit:

I once again tried to use the "line-height" property. It did not work for me. The problem with this:

The input field has to have 34 pixels (22 input field (line-height) + 5x2 margin + 1x2 border). This works in FF and Google Chrome. If I explicitly set the line-height to 22px, it does not change anything in IE. If I set the line-height to some other value (26px), it changes IE to the better, but it also changes the height of the input field in the other browsers (26 + 10 + 2) to 38px, so I cannot use it because the input height should not be other than 34 px.

Answer 1

I have found a solution:

A combination of "line-height" and "height" leads to the desired result:

.ni-ui-input {
    line-height: 27px;
    height:      22px;
}

If I use only "line-height: 27px", it helps me with repairing the IE view, but it changes the height of the input fields in the other browsers.

When I add the "height" attribute, the height of the input fields in the other browsers (Chrome, Firefox) will not change.