title: Twitter Bootstrap: Getting Form Inputs and Buttons to be same the height in Chrome and Firefox
body: <p>Using <a href="http://twitter.github.io/bootstrap/base-css.html#forms" rel="noreferrer">Twitter Bootstrap 2.3.2</a> I have a <code>input-append</code> form:</p>
  
  <pre><code>&lt;form class="bs-docs-example"&gt;
    &lt;div class="input-append"&gt;
      &lt;input type="text" id="form-input" class="span2"&gt;
      &lt;button type="button" class="btn" id="form-btn"&gt;Go!&lt;/button&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I customized the form input and button to have this styling:</p>
  
  <pre><code>#form-input {
    height: 50px;
    font-size: 16px;
    padding: 0px 6px;
  }
  
  #form-btn {
    height: 50px;
    font-size: 16px;
  }
  </code></pre>
  
  <p>The input field and button in Firefox is exactly aligned but the button in Chrome is off my 2px in height so I have to put it to <code>52px</code>. This cannot be done since it messes up the Firefox form. How can I get them to have the same alignment in both browsers?</p>