title: How to style button inputs to be identical in Chrome and Firefox?
body: <p>Take a look at <a href="http://jsfiddle.net/SnZX2/2/" rel="nofollow noreferrer">this JSFiddle example</a> in Chrome and FireFox.</p>
  
  <p>In Chrome, the button should be a tad smaller than in FireFox. I have added the solution CSS from <a href="https://stackoverflow.com/q/5459893/388916">How to reset default button style in Firefox 4 +</a> (which made the button a little smaller) but the button is still bigger in FireFox. The difference isn't very visible in this example, but have a look at how it affects my design.</p>
  
  <p>Chrome:<br>
  <img src="https://i.stack.imgur.com/XaZhF.png" alt="Chrome screenshot"></p>
  
  <p>FireFox:<br>
  <img src="https://i.stack.imgur.com/CWrNr.png" alt="FireFox screenshot"></p>
  
  <p>As you can see the button is thicker in FireFox and is affecting the layout. Is there any way of avoiding this short of using styled divs in place of buttons?</p>
  
  <hr>
  
  <p>Also, I'm using Meyer's CSS reset stylesheet</p>