CSS Sprite仍在发出新请求

Question

I am using CSS sprites however when i hover over it is making another request for the same image and causing a flicker. Any idea why its making 2 requests? Here is my code:

.btn-red-lrg .left {background:url(../images/site-sprite.png) no-repeat 0px 0px transparent;width: 9px;}     
.btn-red-lrg:hover .left {background:url(../images/site-sprite.png) no-repeat 0px -37px transparent;width: 9px;}

Answer 1

Dont' use the background -shorthand property. Use background-position instead, since you only want to update the position.

/* no need for width, background-image etc. */
.btn-red-lrg:hover .left {background-position: 0px -37px;}

Specifying a background-image:url(...) on the :hover pseudo-class can result in a new request if the caching mechanism aren't sufficient or the expiration date is missing/wrong (see Jeff's answer ). Altering the position only won't result in a new request regardless of the browser.

Answer 2

What browser are you using? This is a known bug in using Internet Explorer 6. The solution is to add expires headers to the image on the server.

• Content Expiration in IIS 6
• Content Expiration in IIS 7
• Content expiration in Apache 2