IE6 的 hover 伪类 bug

最新推荐文章于 2019-10-08 11:36:12 发布

转载最新推荐文章于 2019-10-08 11:36:12 发布 · 115 阅读

·

0

·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/fivewood/archive/2009/09/06/1561205.html

本文详细介绍了在IE6浏览器下遇到的伪类:hover不显示的问题，并提供了两种有效解决方案：一是通过设置a:hover的背景色来激活样式，二是为直接子元素为img的结构添加容器元素以解决图像显示后消失的问题。

如下代码：

Code
1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2

<html xmlns="http://www.w3.org/1999/xhtml">
3

<head>
4

<meta http-equiv="Content-Type" content="text/html; charset=bg2312" />
5

<title>IE中伪类:hover的使用及BUG - www.52css.com</title>
6

<style>

7

* {

}{margin:0; padding:0;}
8

#menu{

}{
9

list-style:none;
10

margin:0 auto;
11

width:505px;
12

}
13

#menu li {

}{
14

float:left;
15

width:100px;
16

margin:0 1px 0 0;
17

}
18

#menu li span{

}{
19

display:none;
20

}
21

#menu li a{

}{
22

display:block;
23

padding:10px;
24

height:1em;
25

background:#cc0;
26

position:relative;
27

}
28

#menu li a:hover span{

}{
29

position:absolute;
30

left:0;
31

top:38px;
32

display:block;
33

background:#ecc;
34

}
35

</style>
36

</head>
37

<body>
38

<ul id="menu">
39

<li><a href="">雅虎<span>ddddddddd</span></a></li>
40

<li><a href="">雅虎<span>ddddddddd</span></a></li>
41

<li><a href="">雅虎<span>ddddddddd</span></a></li>
42

<li><a href="">雅虎<span>ddddddddd</span></a></li>
43

<li><a href="">雅虎<span>ddddddddd</span></a></li>
44

45

</ul>
46

</body>
47

</html>

在IE6下，当hover时，不显示span元素。
解决这个问题：设置具体的a:hover{background:red;}(border:0也行！)；

Code
1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2

<html xmlns="http://www.w3.org/1999/xhtml">
3

<head>
4

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5

<title>IE中伪类:hover的使用及BUG - www.52css.com</title>
6

<style>

7

* {

}{margin:0; padding:0;}
8

#menu{

}{
9

list-style:none;
10

margin:0 auto;
11

width:505px;
12

13

}
14

#menu li {

}{
15

float:left;
16

width:100px;
17

margin:0 1px 0 0;
18

}
19

#menu li span{

}{
20

display:none;
21

}
22

#menu li a{

}{
23

display:block;
24

padding:10px;
25

background:#CC0;
26

position:relative;
27

}
28

#menu li a:hover{

}{
29

background:red;
30

}
31

#menu li a:hover span{

}{
32

position:absolute;
33

left:0;
34

top:38px;
35

display:block;
36

background:#ecc;
37

}
38

</style>
39

</head>
40

<body>
41

<ul id="menu">
42

<li><a href="">雅虎<span>ddddddddd</span></a></li>
43

<li><a href="">雅虎<span>ddddddddd</span></a></li>
44

<li><a href="">雅虎<span>ddddddddd</span></a></li>
45

<li><a href="">雅虎<span>ddddddddd</span></a></li>
46

<li><a href="">雅虎<span>ddddddddd</span></a></li>
47

48

</ul>
49

</body>
50

</html>

同样情况，当a的直接子元素是img时，在IE6下，img在显示后就消失不了，不过可以给img加个容器就可以解决。

转载于:https://www.cnblogs.com/fivewood/archive/2009/09/06/1561205.html

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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