Internet Explorer 11 text input padding does not work properly

Our web application has input fields that are created by css.

enter image description here

As you can see in the screenshot, the style works in Firefox (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 in advance

Edit:

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

I also included a screenshot from the developer tools. You can see all the style definitions that take effect in the input field. I do not see a conflicting other definition of style.

Edit:

"line-height". . :

34 (22 ( ) + 5x2 + 1x2). FF Google Chrome. 22px, IE. (26px), IE , (26 + 10 + 2) 38 , 34 .

enter image description here

+4
2

:

" " "" :

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

"line-height: 27px", IE-, .

height, (Chrome, Firefox) .

+3

IE line-height input, .

0

Source: https://habr.com/ru/post/1598329/


All Articles