title: Button element without text causes subsequent buttons to be positioned wrong
body: <p>I came across an interesting HTML button tag behavior while trying to style a button that has no text inside, only a font icon -- the button without text causes all subsequent buttons which do have text to be pushed down. The issue only appears when the buttons have a <code>height</code> attribute specified.</p>
  
  <p><strong><a href="http://jsfiddle.net/jF8MH/2/" rel="noreferrer">JSFiddle</a></strong></p>
  
  <pre><code>&lt;header&gt;
      &lt;button&gt;&lt;!-- No text here --&gt;&lt;/button&gt;
      &lt;button&gt;This button is pushed down&lt;/button&gt;
  &lt;/header&gt;
  
  button { height: 40px; }
  </code></pre>
  
  <p>At first I was sure it was due to the font icon inside the first button that did some weird baseline magic, but as you can see from the minimal working example, the behavior is maintained when there is no content at all inside the button.</p>
  
  <p>I can fix this by adding content to the first button, but because my only content is a <code>&lt;span class="icon user"&gt;&lt;/span&gt;</code>, which is a font icon, it does in fact interfere with the font baseline, and positions the button off just a few pixels. This is why I have decided to position the icon inside absolutely, which fixes the original slight positioning issue, but introduces this new one, as the button now acts as if it were empty.</p>
  
  <p>So, the question remains -- how do I avoid positioning issues with empty buttons?</p>
  
  <p><strong>Note</strong>: it seems that the above only happens on webkit browsers; Firefox positions buttons with text correctly, but pushes the empty ones up.</p>