title: Relative positioning on :hover leads to infinite repaint thrashing
body: <p>I have a <code>&lt;a&gt;</code> tag, rendered as a button that I'd loved to move a pixel to the north on hover. However, I noticed an unwanted behavior when positioning the mouse cursor just so at the bottom edge, the hover gets triggered, and once the button is repositioned the hover is no longer active. This leads to an infinite repaint loop, as long as the cursor is in that position. It maxes out my CPU.</p>
  
  <p>I understand why it's happening, yet, I'd love to find some more elegant solution, than wrapping it in another div that handles the hover, without moving itself.</p>
  
  <p>Any ideas?</p>
  
  <p>Edit: <a href="http://jsfiddle.net/887at/" rel="nofollow">JsFiddle</a> with exaggerated movement of 5px.</p>
  
  <p>I've tried these (all trigger the same loopiness): </p>
  
  <ul>
  <li>position: relative; top: -1px;</li>
  <li>transform: translateY(-1px);</li>
  <li>margin-top: -1px; margin-bottom: 1px; </li>
  <li>border-top: none; border-bottom: 2px ... /* normally 1px all around */</li>
  </ul>
  
  <p>Edit2: The border trick worked, but the bounding box does not move only the content. </p>