IE6 中 a:hover 的bug (转)
来源:互联网 发布:4选1数据选择器真值表 编辑:程序博客网 时间:2024/06/11 13:44
如上图,在制作数码热销排行的页面时,每种手机的图片都是固定的160×120大小,但是出于页面美观及内容可读性的考虑,在列表页上图片都压缩为原大小的50%显示;也就是80×60像素大小。不过当用户将鼠标移动到缩略图上时,我们会按原图大小显示出来。类似的效果在抓虾上也被应用在显示用户头像上:
抓虾使用的技术是利用一个隐藏的浮动层,每张缩略图上注册mouseover事件,当鼠标移动到缩略图上时,设置浮动层中img元素的src属性为头像的图片URL,然后通过JavaScript计算绝对定位,将放大后的头像显示在缩略图上。
事实上,如果图片显示的大小已经固定的话,不需要JavaScript,只需要纯CSS就可以实现类似的效果。如在数码产品热销排行页中,CSS的定义大致如下:
.DigitalImage a {
position: relative;
}
.DigitalImage a:hover {
position: relative;
z-index: 1;
border: none;
}
.DigitalImage a img {
position: static;
width: 80px;
height: 60px;
border: none;
}
.DigitalImage a:hover img {
position: absolute;
z-index: 2;
width: 160px;
height: 120px;
border: 1px solid #CCC;
left: -40px;
top: -30px;
}
原理很简单,设置a元素的position属性为relative,图片最开始显示为50%大小,使用默认定位;当:hover被触发的时候,图片更改为绝对定位,同时显示为原图大小,为了使效果看起来像是对称的盖在缩略图上,同时设置top和left为缩略图的宽高的一半的负数。
以上CSS中比较让人费解的大概就是粗斜显示的 border:none 一句。这看似一个毫无意义的效果,可是如果没有这一句的话,在IE6中就无法触发hover。
以前未曾遇到类似的问题,一番google,才知道这是IE6处理CSS伪类:hover的Bug。例如如下的代码:
<style>
a {}
a span {color: green;}
a:hover {}
a:hover span {color: red; }
</style>
<a href=”http://www.taobao.com“> 淘宝网 <span> 淘你喜欢 </span></a>
在IE7/FF中,鼠标移动到链接上时,”淘你喜欢”字样会变为红色,但IE6则无反应。所以IE6的bug就是如果a 与 a:hover 的css定义是一样的,也就是说如果a:hover 中没有样式的改变,hover就不会被触发。但如果在a:hover{}增加一些特定的属性,例如
a:hover{border:none;}
或者
a:hover{padding:0;}
又或者
a:hover{background: none;}
此时hover就可以触发了。这样的属性还包括direction/text-align/text-indent/float/overflow/position …… 等等。我在数码产品畅销榜页面就是选择了使用border:none。更详细的信息请参考:
- IE Pure CSS Pop Ups Bug
- IE中伪类:hover的使用及BUG
另外,通过阅读 position:relative/absolute无法冲破的等级,发现CSS还有改进的空间,改动后如下:
.DigitalImage a:hover {
position: relative;
}
.DigitalImage a img {
position: static;
width: 80px;
height: 60px;
border: none;
}
.DigitalImage a:hover img {
position: absolute;
width: 160px;
height: 120px;
border: 1px solid #CCC;
left: -40px;
top: -30px;
}
改动的原理就是去掉了a样式定义,直接定义a:hover。这样即避免了IE6的hover的Bug(position也是一个触发显示的属性),另外也避免了 position:relative/absolute无法冲破的等级 一文中提到的z-index的问题,所以你会发现改进后的样式中,z-index属性也去掉了。
- IE6 中 a:hover 的bug (转)
- IE6 中 a:hover 的bug
- a:hover在IE6中的BUG
- IE6 下:hover 中bug解决了(纯CSS)
- IE中伪类:hover的使用及BUG,以及如何在IE6中进行修正(CSS)
- ie6 a的hover无效
- ie6中[:hover] bug 解决方案一
- IE6中a:hover的CSS伪类无效
- ie6 bug - hover 相关
- IE6不支持非A元素:hover伪类的bug的处理
- 【IE6的BUG一】链接伪类(:hover)CSS背景图片有闪动BUG
- IE6中背景属性加a与a:hover问题
- ie6中hover无效的解决方法
- IE6中a:hover选择子元素失效
- IE6bug整理(hover a:hover) IE6 a:hover 无效
- IE6 li a:hover position
- css中hover伪类的bug
- a:hover伪类在IE6下的问题
- 使用EditPlus技巧,提高工作效率(附英文版、自动完成文件、语法文件下载)
- gfx使用嵌入字体时的优化
- <学习笔记>王爽汇编语言__寄存器
- 逻辑有问题的人能做好科研?
- 我是伸手党
- IE6 中 a:hover 的bug (转)
- 【水STL】hdu 4039
- El表达式 自定义标签 El函数区别
- Effective c++ 学习笔记——之条款1:视C++为一个语言联邦
- 对于访问IIS元数据库失败的解决方案
- 需求分析
- POJ 1019 模拟思路题 化整为零
- Effective C++ 读书笔记——条款2:尽量以const,enum,inline替换#define
- hoho