现在很多网站都用背景图片来实现hover（鼠标经过）切换图片。但是IE有个该死的bug会造成超链接的背景图片有时无法cache，因此在鼠标经过超链接图片的时候就看到哗哗一大片的http下载请求
。
这不像很多网站上描述的，是由于IE的缓存策略被设置在“每次访问此页时更新”了造成的，不管IE缓存策略如何设置，都无法彻底避免这个问题。
emu试验了一下，发现用前景图也可以实现老甘（他的域名貌似已经过期，居然没续费……）用背景图实现的类似效果，不过要多用上一些小技巧：
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
<HTML>
<HEAD>
<style>
A.file{overflow:hidden;height:20px;width:20px;}
A.fileIMG{position:relative;left:-130px;top:-350px}
A.file:hover{emu:expression(0)}
A.file:hoverIMG{left:-10px;top:-350px}
A.file2{text-decoration:none;color:gray}
A.file2span{overflow:hidden;height:20px;width:20px;}
A.file2spanIMG{position:relative;left:-130px;top:-348px}
A.file2:hover{color:red;height:20}
A.file2:hoverspanIMG{left:-10px;top:-348px}
</style>
</HEAD>
<BODY>
onesingleicon:<Aclass="file"href="#"><imgsrc="http://www.blogjava.net/images/blogjava_net/emu/1359/o_button.gif"></A>.<BR>
aniconwithtext:<Aclass="file2"href="#"><span><imgsrc="http://www.blogjava.net/images/blogjava_net/emu/1359/o_button.gif"></span>test
</A>
</BODY>
</HTML>
不用背景图的一个代价就是，再也不能css裸奔了。twinsen一定要讲这是个人品问题了。有的时候，要对付IE这样人品不好的平台，牺牲一点人品来换取一点性能上的优化，并不是不值得考虑的吧？
在Firefox下面比较郁闷，必须要display:block才能实现overflow的效果，试了下display:table等table族的样式，都没有办法真正的overflow。
分享到：
相关推荐
本资源“css3实现的视觉差banner图片切换动画特效源码.zip”聚焦于利用CSS3技术来创建引人注目的 banner 图片切换动画，这种效果通常被称为“视差滚动”或“视觉差”效果。这种效果可以为网站增添动态感和深度，提升...
8. **图像分层**：通过JavaScript，可以实现多张图片的叠加和交互，比如鼠标移动到图片上时，背景图淡出，前景图显现，增强图片的层次感。 9. **实时滤镜**：借鉴于Instagram，JavaScript可以添加实时滤镜到图片上...
轮播图用于展示多张图片或内容，通常有自动切换和手动切换功能。可以使用Bootstrap的Carousel组件，或者专门的轮播图库如Slick和Swiper。 六、下拉菜单（Dropdown Menu） 下拉菜单常见于导航栏，当用户点击主菜单项...
4. **轮播图**：首页可能包含轮播图组件，通过定时器和JavaScript控制图片的切换，同时添加淡入淡出、左右滑动等效果，增加互动性。 5. **悬停效果**：鼠标悬停在图片上时，可能出现放大、旋转等效果，这可以通过...
在本文中，我们将深入探讨如何使用Microsoft Foundation Class (MFC)库来实现一个界面换肤功能，这将涉及皮肤文件的加载以及用户界面元素的动态更新。MFC是微软为Windows应用程序开发提供的一种C++类库，它简化了Win...
5. **随机切换图片**：这种特效能随机展示一组图片，常用于背景或装饰。JavaScript可以用来生成随机数，决定显示哪一张图片，同时CSS可以添加过渡效果，使切换更加自然。 6. **圆形鼠标悬停效果**：当鼠标悬停在...
这两组图片在视觉上形成对比，当前景图片切换时，背景图片会同步切换，同时通过CSS滤镜实现模糊效果。这种模糊处理使得背景图片不抢眼，焦点始终集中在当前显示的大图上。 CSS滤镜是CSS3的一个重要特性，允许开发者...
4. **JS特效：**如定时切换和手动切换图片轮播等特效可以显著提升用户体验，使网站更加生动有趣。 5. **多媒体元素：**多媒体元素的使用让网站内容更加丰富多彩，同时也能增加用户停留时间。 6. **美观性：**除了...
例如，你可以用JavaScript创建一个计时器，动态更新页面内容，或者实现图片轮播效果，使网页具有更强的互动性。 二、CSS基础与样式设计 CSS（层叠样式表）则用于定义网页的布局和样式。通过CSS，你可以控制元素的...
不需要复杂的JavaScript逻辑，只需要通过简单的类名切换，就可以实现与支付宝类似的菜单选中效果。这不仅增加了页面的交互性，而且也提高了用户体验。 总结来说，通过CSS和JavaScript的结合使用，我们能够实现富有...
### jQuery UI使用手册知识点概述 #### jQuery UI简介 jQuery UI是一个基于jQuery的用户界面库，它为jQuery框架提供了一套丰富的用户界面交互小部件。尽管在功能上可能与extjs的ui存在一定的差距，但jQuery UI的...
例如，可以使用`setInterval`进行定时切换，`next()`和`prev()`函数来控制前后切换，而`append()`和`prepend()`则用于实现无限循环。 在实际开发中，开发者可能会遇到图片轮播不连贯的问题，这可能是由于图片加载...
在幻灯片效果中，这两个属性可以用于创建流畅的图片切换动画。 例如，要实现背景图的滑动动画，可以设置如下样式： ```css .slide { transition: background-position 0.5s ease; } .slide:hover { background-...
这些动画可以用于按钮 hover 效果、导航栏滚动效果以及页面加载动画，让网页更加生动活泼。 2. JavaScript 动画库：jQuery、GreenSock (GSAP) 和 Three.js 等JavaScript库提供了更高级的动画控制，可以创建复杂的3D...