CSS sprites 技术使用心得

为了解决导航条多个图片加载，会出现部分图片无法显示或加载速度过慢的问题，

在猎头频道使用了 CSS sprites 技术

#nav_1,#nav_2,#nav_3{width:80px; height:35px;} #nav_1{background:url(images/nav.gif) no-repart -5px -10px;} #nav_2{background:url(images/nav.gif) no-repart -105px -10px;} #nav_3{background:url(images/nav.gif) no-repart -205px -10px;} 

调用的同一张图片:images/nav.gif，通过 指定偏移量来实现显示的内容

但这还不能解决问题，因为产生了3个HTTP请求。经过测试后发现正确的写法应该是

#nav_1,#nav_2,#nav_3{ width:80px; height:35px; background:url(images/nav.gif); } #nav_1{background-position: -5px -10px;} #nav_2{background-position: -105px -10px;} #nav_3{background-position: -205px -10px;} 

这样加载整个页面时，images/nav.gif 只产生一次HTTP请求，导航条中的多个按钮都能同步显示。

注意：IE6无法缓存背景图片的bug

具体描述：IE6的 ““temporay internet files”设置为“每次访问此页时检查”时， 背景图片将无法被缓存，在鼠标滑过链接背景图片更换时，会产生闪烁。

解决方案：document.execCommand(”BackgroundImageCache”, false, true);在ie6下执行这条语句即可，Firefox执行时会报错（可用try-cache解决）。用expression也可以达到这个效果最好是用CSS Sprites解决问题。