hover伪类在IE中有bug以前貌似在网上看到过,但是实际应用中没碰到过,今天正好有个页面需要做一个导航栏,结果a:hover设置background后在IE下是无法显示背景的。
html:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<
ul
id="nav">
<
LI
>
Home
</
A
>
</
LI
>
<
LI
>
Submissions
</
A
>
<
UL
>
<
LI
>
<
span
>
Selection process
</
span
>
</
A
>
</
LI
>
</
UL
>
</
LI
>
</
ul
>
|
chrome下显示效果:
css:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
#nav, #nav ul{
margin
:
0
;
padding
:
0
;
list-style-type
:
none
;
list-style-position
:
outside
;
position
:
relative
;
line-height
:
1.5em
;
background
:
#b5bd00
;
}
#nav a{
display
:
block
;
padding
:
0px
5px
;
COLOR:
#484848
; FONT-SIZE:
10px
; FONT-WEIGHT:
bold
;
text-decoration
:
none
;
}
#nav li{
float
:
left
;
position
:
relative
;
}
#nav ul {
position
:
absolute
;
display
:
none
;
width
:
auto
;
top
:
1.5em
;
z-index
:
1000
;
}
#nav li ul a{
width
:
12em
;
height
:
auto
;
margin
:
2px
;
float
:
left
;
display
:
block
;
}
#nav li ul li a:hover{
background
:
#fff
;
margin
:
2px
;
display
:
block
;
}
/*#nav li ul li a:hover span{background:#fff; display:block; width:12em;}
*/
#nav ul ul{
top
:
auto
;
}
#nav li ul ul {
left
:
12em
;
margin
:
0px
0
0
10px
;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display
:
none
;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display
:
block
;
}
|
尽管你怎么样子设置a tag的css都是不管用的,参考了http://www.planabc.net/2007/02/15/ie_hover_bug/
在a tag中增加一个span tag,同时在css中增加
html:
1
2
|
of your event</
span
></
A
>
|
css:
1
|
#nav li ul li a:hover span{
background
:
#fff
;
display
:
block
;
width
:
16em
;}
|
ok,that's done!
转自:http://www.cnblogs.com/Fred_Xu/archive/2011/09/08/ie-a-hover-background-bug.html