title: How can I control the height of text inputs and submit input buttons in different browsers?
body: <p>I have a very little but hard (for me) problem to solve.</p>
  
  <p>I have a text input, and a submit button. I need them to be the exact same height and for this to be true across Chrome and Firefox, ideally internet explorer also.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;input type="text" name="email" /&gt;&lt;input type="submit" value="»" /&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre class="lang-css prettyprint-override"><code>input[type=text] {
      width: 218px;
  }
  
  input[type=submit] {
      background: #000;
      color: #fff;
  }
  
  input[type=submit], input[type=text] {
      padding: 9px;
      font-size: 18px;
      line-height: 18px;
      float: left;
      border: 0;
      display: block;
      margin: 0;
  }
  </code></pre>
  
  <p>I've setup this basic code on a <strong><a href="http://jsfiddle.net/e6aTd/" rel="noreferrer">jsfiddle here.</a></strong></p>
  
  <p>You should notice if you load it in chrome, the button is less height than the text input and in firefox, its larger. </p>
  
  <p>What am I missing?</p>