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


in our web application have input fields, styled css.

enter image description here

as can see in screenshot, styling works in firefox (info data taken firebug), works in google chrome.

but in ie 11 same field has padding problem. word "test" not centered vertically.

so far have tried without success:

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

thanks alot in advance

edit:

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

i included screenshot ie developer tools. can see style definitions take effect on input field. see no conflicting other style definition.

edit:

i once again tried use "line-height" property. did not work me. problem this:

the input field has have 34 pixels (22 input field (line-height) + 5x2 margin + 1x2 border). works in ff , google chrome. if explicitly set line-height 22px, not change in ie. if set line-height other value (26px), changes ie better, changes height of input field in other browsers (26 + 10 + 2) 38px, cannot use because input height should not other 34 px.

enter image description here

i have found solution:

a combination of "line-height" , "height" leads desired result:

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

if use "line-height: 27px", helps me repairing ie view, changes height of input fields in other browsers.

when add "height" attribute, height of input fields in other browsers (chrome, firefox) not change.


Comments

Popular posts from this blog

php - Zend Framework / Skeleton-Application / Composer install issue -

c# - Better 64-bit byte array hash -

python - PyCharm Type error Message -