title: Positioning of text in input tag & buttons. line-height is flat-out ignored sometimes
body: <p>I can't get my some of my buttons or inputs to look the same across browsers. The vertical positioning of text is usually the problem. I've tried multiple browsers, Firefox (16) simply ignores my line-height in OSX and looks different still in Windows.</p>
  
  <p>There's usually a difference of 1px, sometimes more. This is especially a problem when you switch to an iPad or another mobile device, it always looks different somehow.
  Here's my CSS...</p>
  
  <pre><code>  margin         : 0px;
    padding        : 0px;
    font-size      : 15px;
    //height       : 15px; // Tried this too with unsatisfying results
    line-height    : 1;
    vertical-align : top;
  </code></pre>
  
  <p>I took the screenshots without using the height-property
  <img src="https://i.stack.imgur.com/nws6x.jpg" alt="line-height problem in browsers chrome, safari, ie10, firefox. in osx &amp; windows 8"></p>
  
  <p><em>edit:</em><br>
  so I've looked around for more information and found some questions with a similar problem.<br>
  No one solved it though...<br>
  -> <a href="https://stackoverflow.com/questions/4439537/1-pixel-line-height-difference-between-firefox-and-chrome">1 pixel line height difference between Firefox and Chrome</a><br>
  -> <a href="https://stackoverflow.com/questions/10762267/line-height-2px-lower-in-firefox-vs-webkit">line-height 2px lower in firefox vs webkit</a></p>
  
  <p><em>edit2:</em><br>
  furthermore if I make a jsfiddle I still get the problem, it's a little different since it's not in the same context as on the site I'm working on but it's still a line-height/text issue:<br>
  see here: <a href="http://jsfiddle.net/XQ7VD/3/" rel="nofollow noreferrer">http://jsfiddle.net/XQ7VD/3/</a>
  This is Chrome (left) and Firefox (right) on OSX</p>
  
  <p><em>edit3:</em><br>
  Here's a screenshot with the line-height set to 18px (from this jfiddle: <a href="http://jsfiddle.net/BJ8eR" rel="nofollow noreferrer">http://jsfiddle.net/BJ8eR</a>)
  <img src="https://i.stack.imgur.com/npZNl.jpg" alt="enter image description here"></p>
  
  <p>I've just seen that the jsfiddle buttons and hover-boxes have the same issue! xD<br>
  Ok I'm done screenshooting now...</p>
  
  <p>--<br>
  If anyone does know a trick, please get in touch. thx!</p>