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

周所周知，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的值进行元素的显示及隐藏。