您的位置：首页 > 其它

IE6下hover伪类显示隐藏子元素bug及解决方案

2014-05-22 16:51 363 查看
周所周知，ie6只有a元素支持hover伪类，在实际应用中，为了兼容ie6，有时候会使用a元素来做子元素的显示及隐藏，比如下图：





黄色小tips默认隐藏，鼠标hover到“促”字图标后，黄色tips显示。这种简单的交互可以直接使用a标签的hover伪类实现，但在ie6下，这种伪类方法会有一些奇怪的问题，下面用一个简单的demo来演示这种情况下所遇到的问题。

HTML代码：

1
<a
class
=
"a"
href=
"#"
>
2
<div
class
=
"b"
>子元素</div>
3
</a>
CSS代码：

01
.a{
02
display
:
block
;
03
position
:
relative
;
04
width
:
20px
;
05
height
:
20px
;
06
background
:
#000
;
07
}
08
.b{
09
display
:
none
;
10
position
:
absolute
;
11
left
:
0
;
12
top
:
25px
;
13
width
:
200px
;
14
height
:
100px
;
15
background
:
#F00
;
color
:
#FFF
;
16
}
17
.a:hover
.b{
18
display
:
block
;
19
}
这段代码在除了ie6外的其他浏览器中均能完美呈现，可一到ie6就出问题了。

BUG1：子元素不显示

在ie6下，当鼠标hover到a元素时，b元素并没有如预期所想显示出现。

周所周知，ie6/7的bug大多数可通过出发hasLayout来解决，那么我们可以试想一下是否能通过触发hasLayout来解决。由于a、b元素已经有了宽高，已经触发了hasLayout，那么是否可以在a的伪类上触发呢？

尝试添加以下代码：

1
.a:hover{
2
zoom:
1
;
3
}
再看看ie6，问题已经得到解决，hover时b元素可以正常显示。

BUG1解决方案：

为hover伪类添加zoom:1属性，触发伪类的hasLayout。

目前CSS代码如下：

01
.a{
02
display
:
block
;
03
position
:
relative
;
04
width
:
20px
;
05
height
:
20px
;
06
background
:
#000
;
07
}
08
.b{
09
display
:
none
;
10
position
:
absolute
;
11
left
:
0
;
12
top
:
25px
;
13
width
:
200px
;
14
height
:
100px
;
15
background
:
#F00
;
color
:
#FFF
;
16
}
17
.a:hover{
18
zoom:
1
;
19
}
20
.a:hover
.b{
21
display
:
block
;
22
}
但是，当我们把鼠标移开a元素后，发现ie6下b元素没有全部消失，如图：





BUG2：子元素hover后不消失

这个bug有点诡异，估计是渲染的时候出了错，ie6经常会有这种莫名其妙的问题，由于a、b元素及a的伪类均触发了hasLayout，目前能触发hasLayout的元素已经不存在了，因此触发hasLayout的这个方案暂时可以放弃。

转变一下思路，既然问题出在display上，那么不改变b元素的display属性能否解决这个bug呢？

那么，我们在不改变display属性的情况下尝试用另外一种方法将b元素进行显示、隐藏。

方案一：

hover前为a元素添加overflow:hidden，hover后改变overflow的值为visible，并去掉对b元素display属性的修改，代码如下：

01
.a{
02
display
:
block
;
03
position
:
relative
;
04
width
:
20px
;
05
height
:
20px
;
06
overflow
:
hidden
;
07
background
:
#000
;
08
}
09
.b{
10
position
:
absolute
;
11
left
:
0
;
12
top
:
25px
;
13
width
:
200px
;
14
height
:
100px
;
15
background
:
#F00
;
color
:
#FFF
;
16
}
17
.a:hover{
18
overflow
:
visible
;
19
zoom:
1
;
20
}
问题得到解决，ie6下效果完美。

等等。。。

如果某些情况不能通过改变overflow的值时，能否有另外一种解决方案？

关于元素显示隐藏的css属性，除了display外，还有另外一个属性：visibility，那么，能否使用这个属性来解决问题呢？

方案二：

为ie6的b元素添加visibility属性，代码如下：

01
.a{
02
display
:
block
;
03
position
:
relative
;
04
width
:
20px
;
05
height
:
20px
;
06
overflow
:
hidden
;
07
background
:
#000
;
08
}
09
.b{
10
  
visibility
:
hidden
;
11
position
:
absolute
;
12
left
:
0
;
13
top
:
25px
;
14
width
:
200px
;
15
height
:
100px
;
16
background
:
#F00
;
color
:
#FFF
;
17
}
18
.a:hover{
19
zoom:
1
;
20
}
21
.a:hover
.b{
22
visibility
:
visible
;
23
}
ie6下测试通过，看来这个方案也可行。关于display及visibility属性的不同，可自行google查阅，此处不做讨论。

当然，相信有同学已经想到另外一种对b元素进行显示及隐藏的方法，通过改变b元素的left/top/right/bottom值实现，此处以left值为例，代码如下：

01
.a{
02
display
:
block
;
03
position
:
relative
;
04
width
:
20px
;
05
height
:
20px
;
06
overflow
:
hidden
;
07
background
:
#000
;
08
}
09
.b{
10
  
left
:
-9999em
;
11
position
:
absolute
;
12
left
:
0
;
13
top
:
25px
;
14
width
:
200px
;
15
height
:
100px
;
16
background
:
#F00
;
color
:
#FFF
;
17
}
18
.a:hover{
19
zoom:
1
;
20
}
21
.a:hover
.b{
22
left
:
0
;
23
}
这样在ie6下也可以实现显示、隐藏元素的效果，解决方案多多，也许还有其他不同的方案，欢迎大家一起探讨！

BUG2解决方案：

1. 通过改变hover伪类元素的overflow值来隐藏显示子元素；

2. 通过visibility属性来显示隐藏子元素；

3. 通过改变子元素left/top/right/bottom的值进行元素的显示及隐藏。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航