title: Weird lines when using display: inline-block; inside <a> tags
body: <p>Whenever I create a <code>div</code> with <code>display: inline-block;</code> style inside an <code>a</code> tag, I get these weird lines at the bottom, that show up for no apparent reason at all. The problem seems to reproduce itself only when I place the <code>div</code> inside the <code>a</code> tags, instead of vice versa, but the reason I have an <code>a</code> tag surrounding my divs is to make buttons out of them.</p>
  
  <p>It's kind of hard to explain, but I've made a fiddle to reproduce the problem so I can show it to you.</p>
  
  <p><a href="http://jsfiddle.net/bcnobel/6L92C/2/" rel="nofollow">http://jsfiddle.net/bcnobel/6L92C/2/</a><br>
  Note the black lines between the divs.</p>
  
  <p>Has anybody had this as well before?<br>
  Does anybody know a simple (yet elegant) workaround for this?</p>