ie6 下 hover问题
今天，在给一个div弄边框时，发现FF下没问题，但是ie6下就出现问题，上Google搜索下，原来是ie6不支持hover伪类
还是Google一下，搜索到以下的解决办法。
Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <meta name="keywords" content="ie6,hover,fonti" />
6 <meta name="description" content="fonti's space" />
7 <title>让ie6支持hover伪类</title>
8 <!-- css好像写的很乱，不过效果可以实现 -->
9 <style type="text/css" media="screen">
10 body {
11 background:black;
12 }
13 h1 {font-size:15px;color:white;}
14 a {text-decoration:none;}
15 #ie6_hover_1{
16 margin-left:40px;
17 width:140px;
18 _width:135px;
19 height:40px;
20 color:#999;
21 padding:10px 20px 15px 20px;
22 _padding:10px 20px 10px 20px;
23 border:5px solid #333;
24 background:#222222;
25 text-decoration:none;
26 text-align:center;
27 cursor: pointer;
28 font-size:20px;
29 }
30 #ie6_hover_1:hover,#ie6_hover_1.hover {
31 border:5px solid #EA7B20;
32 color:white;
33 }
34
35 #ie6_hover_2{
36 list-style:none;
37 margin-top:0px;
38 }
39 #ie6_hover_2 li{
40 float:left;
41 width:185px;
42 margin-right:30px;
43 margin-top:18px;
44 _margin-top:10px;
45 height:70px;
46 }
47
48 #ie6_hover_2 li div{
49 font-size:20px;
50 margin-top:-13px;
51 *margin-top:10px;
52 _margin-top:0px;
53 width:180px;
54 _width:166px;
55 text-align:center;
56 cursor: pointer;
57 padding:10px 0 10px 5px;
58 _padding:10px 5px 10px 5px;
59 border:5px solid #333;
60 color:#999999;
61 background:#222222;
62 text-decoration:none;
63 }
64 #ie6_hover_2 li div.hover{
65 border:5px solid #EA7B20;
66 color:#DEDEDE;
67 }
68 #ie6_hover_2 li div:hover{
69 border:5px solid #EA7B20;
70 color:#DEDEDE;
71 }
72 </style>
73 </head>
74 <body>
75 <h1>单个对象演示</h1>
76 <a href="http://www.fonti.cn"><div id="ie6_hover_1">ie6 hover伪类<br>
77 解决办法</div></a><br><br><br>
78 <h1>多个对象演示</h1>
79 <ul id="ie6_hover_2">
80 <li><a href="http://www.fonti.cn"><div>ie6 hover伪类<br>
81 解决办法</div></a></li>
82 <li><a href="http://www.fonti.cn"><div>ie6 hover伪类<br>
83 解决办法</div></a></li>
84 <li><a href="http://www.fonti.cn"><div>ie6 hover伪类<br>
85 解决办法</div></a></li>
86 <li><a href="http://www.fonti.cn"><div>ie6 hover伪类<br>
87 解决办法</div></a></li>
88 </ul>
89
90 <script type="text/javascript">
91 // 浏览器版本判断
92 var Client = {
93 Engine: {'name': 'unknown', 'version': ''},
94 Features: {}
95 };
96 Client.Features.xhr = !!(window.XMLHttpRequest);
97 Client.Features.xpath = !!(document.evaluate);
98 if (window.opera) Client.Engine.name = 'opera';
99 else if (window.ActiveXObject) Client.Engine = {'name': 'ie', 'version': (Client.Features.xhr) ? 7 : 6};
100 else if (!navigator.taintEnabled) Client.Engine = {'name': 'webkit', 'version': (Client.Features.xpath) ? 420 : 419};
101 else if (document.getBoxObjectFor != null) Client.Engine.name = 'gecko';
102 Client.Engine[Client.Engine.name] = Client.Engine[Client.Engine.name + Client.Engine.version] = true;
103
104 <!--
105 // 获取单个对象
106 function $1(e){
107 var pr=document.getElementById(e);
108 pr.onmouseover=function(){
109 this.tmpClass=this.className;
110 this.className+=" hover";
111 }
112 pr.onmouseout=function(){
113 this.className=this.tmpClass;
114 }
115 }
116 if(Client.Engine.ie6){
117 $1("ie6_hover_1");
118 }
119 // 获取多个子对象
120 function $2(e){
121 var pr=document.getElementById(e).getElementsByTagName("div");
122 for(var i=0;i<pr.length;i++){
123 pr[i].onmouseover=function(){
124 this.tmpClass=this.className;
125 this.className+=" hover";
126 }
127 pr[i].onmouseout=function(){
128 this.className=this.tmpClass;
129 }
130 }
131 }
132 if(Client.Engine.ie6){
133 $2("ie6_hover_2");
134 }
135
136 //-->
137 </script>
138 </body>
139 </html>效果演示： 点击查看效果
还是Google一下，搜索到以下的解决办法。
Code1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <meta name="keywords" content="ie6,hover,fonti" />
6 <meta name="description" content="fonti's space" />
7 <title>让ie6支持hover伪类</title>
8 <!-- css好像写的很乱，不过效果可以实现 -->
9 <style type="text/css" media="screen">
10 body {
11 background:black;
12 }
13 h1 {font-size:15px;color:white;}
14 a {text-decoration:none;}
15 #ie6_hover_1{
16 margin-left:40px;
17 width:140px;
18 _width:135px;
19 height:40px;
20 color:#999;
21 padding:10px 20px 15px 20px;
22 _padding:10px 20px 10px 20px;
23 border:5px solid #333;
24 background:#222222;
25 text-decoration:none;
26 text-align:center;
27 cursor: pointer;
28 font-size:20px;
29 }
30 #ie6_hover_1:hover,#ie6_hover_1.hover {
31 border:5px solid #EA7B20;
32 color:white;
33 }
34
35 #ie6_hover_2{
36 list-style:none;
37 margin-top:0px;
38 }
39 #ie6_hover_2 li{
40 float:left;
41 width:185px;
42 margin-right:30px;
43 margin-top:18px;
44 _margin-top:10px;
45 height:70px;
46 }
47
48 #ie6_hover_2 li div{
49 font-size:20px;
50 margin-top:-13px;
51 *margin-top:10px;
52 _margin-top:0px;
53 width:180px;
54 _width:166px;
55 text-align:center;
56 cursor: pointer;
57 padding:10px 0 10px 5px;
58 _padding:10px 5px 10px 5px;
59 border:5px solid #333;
60 color:#999999;
61 background:#222222;
62 text-decoration:none;
63 }
64 #ie6_hover_2 li div.hover{
65 border:5px solid #EA7B20;
66 color:#DEDEDE;
67 }
68 #ie6_hover_2 li div:hover{
69 border:5px solid #EA7B20;
70 color:#DEDEDE;
71 }
72 </style>
73 </head>
74 <body>
75 <h1>单个对象演示</h1>
76 <a href="http://www.fonti.cn"><div id="ie6_hover_1">ie6 hover伪类<br>
77 解决办法</div></a><br><br><br>
78 <h1>多个对象演示</h1>
79 <ul id="ie6_hover_2">
80 <li><a href="http://www.fonti.cn"><div>ie6 hover伪类<br>
81 解决办法</div></a></li>
82 <li><a href="http://www.fonti.cn"><div>ie6 hover伪类<br>
83 解决办法</div></a></li>
84 <li><a href="http://www.fonti.cn"><div>ie6 hover伪类<br>
85 解决办法</div></a></li>
86 <li><a href="http://www.fonti.cn"><div>ie6 hover伪类<br>
87 解决办法</div></a></li>
88 </ul>
89
90 <script type="text/javascript">
91 // 浏览器版本判断
92 var Client = {
93 Engine: {'name': 'unknown', 'version': ''},
94 Features: {}
95 };
96 Client.Features.xhr = !!(window.XMLHttpRequest);
97 Client.Features.xpath = !!(document.evaluate);
98 if (window.opera) Client.Engine.name = 'opera';
99 else if (window.ActiveXObject) Client.Engine = {'name': 'ie', 'version': (Client.Features.xhr) ? 7 : 6};
100 else if (!navigator.taintEnabled) Client.Engine = {'name': 'webkit', 'version': (Client.Features.xpath) ? 420 : 419};
101 else if (document.getBoxObjectFor != null) Client.Engine.name = 'gecko';
102 Client.Engine[Client.Engine.name] = Client.Engine[Client.Engine.name + Client.Engine.version] = true;
103
104 <!--
105 // 获取单个对象
106 function $1(e){
107 var pr=document.getElementById(e);
108 pr.onmouseover=function(){
109 this.tmpClass=this.className;
110 this.className+=" hover";
111 }
112 pr.onmouseout=function(){
113 this.className=this.tmpClass;
114 }
115 }
116 if(Client.Engine.ie6){
117 $1("ie6_hover_1");
118 }
119 // 获取多个子对象
120 function $2(e){
121 var pr=document.getElementById(e).getElementsByTagName("div");
122 for(var i=0;i<pr.length;i++){
123 pr[i].onmouseover=function(){
124 this.tmpClass=this.className;
125 this.className+=" hover";
126 }
127 pr[i].onmouseout=function(){
128 this.className=this.tmpClass;
129 }
130 }
131 }
132 if(Client.Engine.ie6){
133 $2("ie6_hover_2");
134 }
135
136 //-->
137 </script>
138 </body>
139 </html>
