emu in blogjava

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  171 随笔 :: 103 文章 :: 1052 评论 :: 2 Trackbacks
现在很多网站都用背景图片来实现hover(鼠标经过)切换图片。但是IE有个该死的bug会造成超链接的背景图片有时无法cache,因此在鼠标经过超链接图片的时候就看到哗哗一大片的http下载请求

这不像很多网站上描述的,是由于IE的缓存策略被设置在“每次访问此页时更新”了造成的,不管IE缓存策略如何设置,都无法彻底避免这个问题。

emu试验了一下,发现用前景图也可以实现老甘(他的域名貌似已经过期,居然没续费……)用背景图实现的类似效果,不过要多用上一些小技巧: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style>
    A.file
{overflow:hidden;height:20px;width:20px;}
    A.file IMG
{position:relative;left:-130px;top:-350px}
    A.file:hover
{emu:expression(0)}
    A.file:hover IMG
{left:-10px;top:-350px}

    A.file2 
{text-decoration:none;color:gray}
    A.file2 span
{overflow:hidden;height:20px;width:20px;}
    A.file2 span IMG
{position:relative;left:-130px;top:-348px}
    A.file2:hover
{color:red;height:20}
    A.file2:hover span IMG
{left:-10px;top:-348px}
</style>
</HEAD>
<BODY>
 one single icon : 
<class="file" href="#"><img src="http://www.blogjava.net/images/blogjava_net/emu/1359/o_button.gif"></A>.<BR>
an icon with text:
<class="file2" href="#"><span><img src="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。
posted on 2007-06-06 20:45 emu 阅读(3667) 评论(8)  编辑  收藏

评论

# re: 用前景图实现hover切换图片 2007-06-07 09:37 TwinsenLiang
有别的方法又不用,不要用这些烂招,大哥  回复  更多评论
  

# re: 用前景图实现hover切换图片 2007-06-07 09:47 emu
技术探讨,不必这么执着于烂不烂啦,大哥  回复  更多评论
  

# re: 用前景图实现hover切换图片 2007-07-17 14:38 Scorr
两位大哥

:)  回复  更多评论
  

# re: 用前景图实现hover切换图片 2007-08-16 15:05 Gulu77
想法吾错~,但英雄无用武之地~  回复  更多评论
  

# re: 用前景图实现hover切换图片 2007-08-17 18:39 emu
呵呵玩玩而已嘛,如果苛求每个创新都一定要有使用价值,那我们的创新精神就会收到压制。  回复  更多评论
  

# re: 用前景图实现hover切换图片 2009-05-15 16:28 藏獒价格
CSS高级运用哦.  回复  更多评论
  

# re: 用前景图实现hover切换图片 2009-05-15 16:29 藏獒
我一般喜欢把CSS写在TABLE或DIV里,只有经常重用的CSS我才会写成文件.  回复  更多评论
  

# re: 用前景图实现hover切换图片 2009-05-15 16:30 魔兽世界私服
CSS其实难学,哎..看起来不难,其实难...  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: