title: Padding of Text Input in Internet Explorer 11 does not work as expected
body: <p>In our web application we have input fields, which are styled by css.</p>
  
  <p><img src="https://i.stack.imgur.com/V5mHB.png" alt="enter image description here"></p>
  
  <p>As you can see in the screenshot, the styling works in Firefox (info data taken from Firebug), it also works in Google Chrome.</p>
  
  <p>But in IE 11 the same field has this padding problem. The word "test" is not centered vertically.  </p>
  
  <p>So far I have tried without success:  </p>
  
  <pre><code>box-sizing: border-box
  extra line-height attribute
  overflow-visible attribute
  vertical-align
  </code></pre>
  
  <p>Thanks alot in advance</p>
  
  <p>Edit:</p>
  
  <p>I included a minimal CSS reset (<a href="https://perishablepress.com/a-killer-collection-of-global-css-reset-styles/" rel="noreferrer">https://perishablepress.com/a-killer-collection-of-global-css-reset-styles/</a>), but it did not change.</p>
  
  <p>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.</p>
  
  <p>Edit:</p>
  
  <p>I once again tried to use the "line-height" property. It did not work for me. The problem with this:  </p>
  
  <p>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.</p>
  
  <p><img src="https://i.stack.imgur.com/ztukU.png" alt="enter image description here"></p>