My responsive-scaled sprites are sliding

My responsive-scaled sprites are sliding

Summary: Responsively-scaled sprites sliding and occasionally displaying
incorrect sprite.
Background: I've googled and perused SO for answers to this -- and found a
few, such as this one -- but they haven't told me anything I haven't
already been over time and time again. I've been working on this over the
past week, and I'm feeling extremely frustrated. :(
Problem: I'm trying to responsively scale chip and card sprites for use in
a poker game. I have the scaling working perfectly (and in-game everything
repositions and scales perfectly according to table size), but the sprites
appear to "slide" during its resizing, and occasionally showing the
incorrect card. While endeavoring to discover a solution to this most
unseemly behavior, I've encountered numerous sites using scaled sprites
correctly, but I cannot for the life of me determine what I'm doing wrong
with mine.
Example: I've prepared a jsfiddle with only the relevant portions
displaying the issue, here: http://jsfiddle.net/VsfZD/2/
Applicable CSS: (to satisfy the jsfiddle+code requirement):



/* Cards are 47x64 (spritesheet is 53 cards wide, so 2491x64 px) */
/* Spacer is 47x64 */
.card {
position: absolute;
width: 4%;
max-width: 47px;
z-index: 306;
overflow: hidden;
}
.card .card_spacer {
display: block;
height: auto;
width: 100%;
}
.card .card_img {
position: absolute;
top: 0px;
left: 0px;
max-width: none;
max-height: 100%;
}
.two-clubs img.card_img { left: -200%; }
.six-diamonds img.card_img { left: -1600%; }
.ace-diamonds img.card_img { left: -4900%; }
.card_back img.card_img { right: -5200%; }



Please, if you can help me fix this I'll be greatly in your debt!
Additional req's: css only. no frameworks, no bootstrap, no js. must work
in IE8