title: Strange Chrome background-image cut off
body: <p>On my website I have a header with buttons made from background-images and a jQuery hover event. The problem is, in Chrome and Chrome only (in my tests), when mousing over the button the hover image is slightly cut off by about a pixel. I've tested it some and realized it only appears when there is a scroll bar (for consistency's sake, I've added overflow-y: scroll to all of my pages). The problem is fixed if I subtract half a pixel from the width, but it also messes with the margins. The background images are an identical size, 102x42px.</p>
  
  <p>Here is my CSS and a <a href="http://techwiq.com/home.php" rel="nofollow">link to my website</a>:</p>
  
  <pre><code>.menubutton
  {
  margin:0px auto;
  margin-top:-10px;
  background:url('../img/buttons/menureg.png');
  width:102px;
  height:32px;
  display:block;
  color:#6F6F6F;
  font-size:16px;
  text-shadow: 0px 0px 1px rgba(0,0,0,0.2);
  padding-top:10px;
  text-decoration:none;
  }
  .menubutton:hover
  {
  background:url('../img/buttons/menuhover.png');
  color:#E0E0E0;
  text-shadow: 0px 0px 1px rgba(0,0,0,0.75);
  }
  </code></pre>