a:hover在IE6中的BUG

这也是最近工作中碰到的一个问题,其实以前也经常碰到过。具体是这样的,有一个图片链接,为了有明显一些的提示效果,需要在鼠标移上去的时候把它放大。按思路来说,其实是很容易的,只要在a:hover img{}里定义鼠标经过时改变图片的大小就可以了。但实际上,在IE6中,a:hover img{}里定义的内容并不生效。

IE6对伪类的支持真的很烂,除了A标签外其它标签都不支持:hover伪类,而偏偏这个唯一支持的a:hover也还有着BUG。解决的方法就是给a:hover {}定义一个属性:

a:hover {zoom:1;}/*这里可以换成其他很多的属性。*/
a:hover img {……}

在网上找出的答案基本上都是这样,的确这样能解决问题,但却都没有说这个BUG到底是为什么。最初我是以为是要触发layout,但经过试验,不能触发layout的属性也能生效,比如说color、border之类的。也就是这一次,我才找到此BUG的原因所在:当a:hover {}的属性跟a {}中的是一样的时候,也就是说a:hover没有发生属性的改变,完全继承a的属性的时候,就会产生此BUG。所以给a:hover {}定义一个属性值就能解决这个问题,至于定义什么值就看具体情况了,至少可以不用zoom这个看起来有hack嫌疑的属性咯。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值