IE6 的 hover 伪类 bug
如下代码：
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加个容器就可以解决。
Code1
<!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>解决这个问题：设置具体的a:hover{background:red;}(border:0也行！)；
Code1
<!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>
浙公网安备 33010602011771号