title: Make form button/text field same height in all browsers?
body: <p>I have the following css and html (drilled down to the essentials. The full code with additional styles can be found here: I have this css I pasted on jsfiddle: <a href="http://jsfiddle.net/BwhvX/" rel="noreferrer">http://jsfiddle.net/BwhvX/</a> , this is however enough to reproduce the problem)</p>
  <p>css:</p>
  <pre><code>* {
      margin: 0px;
      padding: 0px;
      font-size: 13px;
      line-height: 15px;
      border: none;
  }
  input[type=&quot;submit&quot;]::-moz-focus-inner {
      border: 0;
  }
  
  #search .text, #search .button {
     border: 1px solid red;
  }
  </code></pre>
  <p>html:</p>
  <pre><code>&lt;form method=&quot;post&quot; id=&quot;search&quot; action=&quot;&quot;&gt;
      &lt;p&gt;&lt;input type=&quot;text&quot; class=&quot;text&quot; value=&quot;&quot; name=&quot;suche&quot;&gt;&lt;input type=&quot;submit&quot; class=&quot;button&quot; value=&quot;Suchen&quot;&gt;&lt;/p&gt;
  &lt;/form&gt;
  </code></pre>
  <p>this is how firefox renders:</p>
  <h1><img src="https://i.stack.imgur.com/psQ8D.png" alt="nice looking" /></h1>
  <p>this is how chrome renders:</p>
  <p><img src="https://i.stack.imgur.com/HEqYa.png" alt="bad looking" /></p>
  <p>i want the two form elements to have the same height in all browsers. looks to me like some default style is applied, that i manually need to reset like i did for firefox in this example.
  in chrome developer tools one has height 16 and one height 17 px but i am not able to see where it comes from, its just calculated. the applied styles (that are shown to me) are the same.</p>