css - Padding of Text Input in Internet Explorer 11 does not work as expected -
in our web application have input fields, styled css.
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.
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
Post a Comment