title: HTML input field height different in different browsers
body: <h3>Current Situation</h3>
  <p>On a simple website I have an input control with a fix height where I have a text with a certain font size. I want that text to show up vertically aligned in the middle of the input field. But even though I used a reset css (link <a href="https://github.com/necolas/normalize.css/" rel="nofollow noreferrer">here</a>) and setting the <code>-webkit-appearance</code> to <code>none</code> it still is not centered.</p>
  <p><a href="https://i.stack.imgur.com/459z2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/459z2.png" alt="enter image description here" /></a></p>
  <p>You can see that for IE the padding at the top is higher, for iOS it is even worse. There are 12 more pixels padding.</p>
  <h3>Some Code</h3>
  <p>HTML:</p>
  <pre><code>&lt;!-- time --&gt;
  &lt;input type=&quot;text&quot; class=&quot;meeting-time&quot; style=&quot;-webkit-appearance: none; padding: 0px; inn&quot; value=&quot;00:00&quot;/&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>.meeting-time {
      margin: 0;
      padding: 0;
      width: 100px;
      height: 37px;
      text-align: center;
      font-family: &quot;roboto&quot;,sans-serif;
      font-style: normal;
      font-size: 37px;    
      font-weight: 300;
      background: yellow;
      vertical-align: middle;
      -webkit-appearance: none;
  }
  </code></pre>
  <h3>Actual Question</h3>
  <p>How can I have a text field where the text is vertically aligned for all browsers.</p>
  <p>I know this has been asked a couple of times already, but the solutions proposed didn't work until now. It's probably something trivial that I miss.</p>