友诺网--SOHO乐园，工作社区

搜索

热门标签

返回首页
当前位置: 主页 > 开发手册 > Html >

IE6不识别li hover

时间:2010-01-16 11:03来源:互联网 作者:网络 点击:次
IE6只能识别链接，也就A元素下的Hover事件，因此，许多CSS菜单利用了li的hover属性，使之不能被IE6下起作用。 友诺网查询了网上资料，大致上有两种解决办法： 第一种，是利用JS在IE6下
　　

IE6只能识别链接，也就A元素下的Hover事件，因此，许多CSS菜单利用了li的hover属性，使之不能被IE6下起作用。

友诺网查询了网上资料，大致上有两种解决办法：

第一种，是利用JS在IE6下重置LI等的属性

网友PHPishard写的非常清楚，下面此段完整转载其原文：

 

经过我一下午加一上午的反复调试,探索
终于整明白了IE6中 li:hover和li:hover 后的层z-index问题
-----(_(_(_(_(_(_(_(这是冲击波分割线)_)_)_)_)_)_)_)------
首先就是纯div+css做下拉菜单的代码
然后考虑IE6兼容问题
因为IE6不认li:hover,所以需要一段JS代码来实现这个功能
网上有很多种,这里我选择其中的一种我觉得最方便的
-----------------code-----------------
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>
</script>
-----------------code-----------------
上色好麻烦...我这里大概按Editplus配了下色,嗯嗯
顺便贴个使用的例子:
-----------------code-----------------
<ul id="nav">
<li><a href="#">这是显示的标题1</a>
<ul>
<li><a href="#">这是列表中的内容1</a></li>
<li><a href="#">这是列表中的内容2</a></li>
<li><a href="#">这是列表中的内容3</a></li>
<li><a href="#">这是列表中的内容4</a></li>
</ul>
</li>
<li><a href="#">这是显示的标题2</a>
<ul>
<li><a href="#">这是列表中的内容5</a></li>
<li><a href="#">这是列表中的内容6</a></li>
<li><a href="#">这是列表中的内容7</a></li>
<li><a href="#">这是列表中的内容8</a></li>
</ul>
</li>
</ul>
-----------------code-----------------
还有css,其中的注释我没改,样式大体内容可以自己改 :
-----------------code-----------------
#nav, #nav ul{ /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#nav li{ /* all list items */
float: left;
width: 10em; /* width needed or else Opera goes nuts */
}
#nav li ul{ /* second-level lists */
position: absolute;
background: orange;
width: 10em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers 这里用left:-999em的也行,用display:none的也行,看您喜欢用啥 */
}

#nav li:hover ul, #nav li.sfhover ul{ /* lists nested under hovered list items */
left: auto;/* 如果上面用left的了,那么这就不用改,最多改个数,如果用display:none了,那么这里改成display:block*/

}
-----------------code-----------------
至此就可以用了
接下来,如果需要给下拉的那个列表定位
用到position:absolute,并且设置父元素li为position:relative了的话
那么就会发现下拉菜单不会遮住下面的元素,而是跑到了所有层的最底下
并且无论您怎么设置z-index都没有用
那么关键来了,删掉父元素li的position:relative再看看,好了吧?
或许您要问了,如果删了父元素的包含框,那怎么定位absolute那位呢?
用margin吧~!哈哈,比如:
-----------------code-----------------
#nav li ul {
position: absolute;
background: azure;
width: 200px;
height:200px;
display: none;
margin-left: 80px;
margin-top: -15px;
}
-----------------code-----------------
到此说完了,再有新问题我再接着发
PS:此方法兼容 IE6 IE7 IE8 Chrome Firefox3

第二种方法：在IE6中利用表格。

添加一条#menu li a table{ display:block; width:100%; border:none;}
ｈｔｍｌ中的注释的表格加上<!--[if lte IE 6]><a href="#"><table cellpadding="0" cellspacing="0"><tr><td><![endif]-->

一个实例：

  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>flyout-竖向三级弹出菜单</title> 
  6. <style type="text/css"> 
  7. /* common styling */ 
  8. .menu {font-family: arial, sans-serif; width:106px; height:150px; position:relative; margin:0; font-size:11px; margin:50px 0;} 
  9. .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #aaa; background:#710069; line-height:20px; font-size:11px; overflow:hidden;} 
  10. .menu ul {padding:0; margin:0;list-style-type: none; } 
  11. .menu ul li {float:left; margin-right:1px; position:relative;} 
  12. .menu ul li ul {display: none;} 
  13. /* specific to non IE browsers */ 
  14. .menu ul li:hover a {color:#fff; background:#36f;} 
  15. .menu ul li:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;} 
  16. .menu ul li:hover ul li a.hide {background:#6a3; color:#fff;} 
  17. .menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;} 
  18. .menu ul li:hover ul li ul {display: none;} 
  19. .menu ul li:hover ul li a {display:block; background:#eee; color:#000;} 
  20. .menu ul li:hover ul li a:hover {background:#6fc; color:#000;} 
  21. .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;} 
  22. </style> 
  23. <!--[if lte IE 6]> 
  24. <style type="text/css"> 
  25. .menu ul li a.hide, .menu ul li a:visited.hide {display:none;} 
  26. .menu ul li a:hover ul li a.hide {display:none;} 
  27. .menu ul li a:hover {color:#fff; background:#36f;} 
  28. .menu ul li a:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;} 
  29. .menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;} 
  30. .menu ul li a:hover ul li a {display:block; background:#eee; color:#000;} 
  31. .menu ul li a:hover ul li a ul {visibility:hidden;} 
  32. .menu ul li a:hover ul li a:hover {background:#6fc; color:#000;} 
  33. .menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;} 
  34. </style> 
  35. <![endif]--> 
  36. </head> 
  37. <body> 
  38. <div class="menu"> 
  39.  <ul> 
  40.  <li><a class="hide" href="../menu/index.html">DEMOS</a> 
  41.  
  42.  <!--[if lte IE 6]> 
  43.  <a href="../menu/index.html">DEMOS 
  44.  <table><tr><td> 
  45.  <![endif]--> 
  46.   <ul> 
  47.   <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero  
  48.     dollars</a></li> 
  49.   <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping  
  50.     text</a></li> 
  51.   <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> 
  52.   <li><a href="../menu/nodots.html" title="Removing active/focus borders">active  
  53.     focus</a></li> 
  54.   <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders"> 
  55.  
  56.     HOVER/CLICK ></a> 
  57.   <!--[if lte IE 6]> 
  58.   <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders"> 
  59.     HOVER/CLICK > 
  60.   <table><tr><td> 
  61.   <![endif]--> 
  62.    <ul> 
  63.    <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> 
  64.    <li><a href="../menu/nodots.html" title="Removing active/focus borders"> 
  65.     active focus</a></li> 
  66.    <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders"> 
  67.  
  68.     hover/click</a></li> 
  69.    </ul> 
  70.   <!--[if lte IE 6]> 
  71.   </td></tr></table> 
  72.   </a> 
  73.   <![endif]--> 
  74.   </li> 
  75.   <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow"> 
  76.     shadow boxing</a></li> 
  77.   <li><a href="../menu/old_master.html" title="Image Map for detailed information"> 
  78.     image map</a></li> 
  79.  
  80.   <li><a href="../menu/bodies.html" title="fun with background images">fun  
  81.     backgrounds</a></li> 
  82.   <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade  
  83.     scrolling</a></li> 
  84.   <li><a href="../menu/em_images.html" title="em size images compared">em sized  
  85.     images</a></li> 
  86.   </ul> 
  87.   <!--[if lte IE 6]> 
  88.   </td></tr></table> 
  89.   </a> 
  90.   <![endif]--> 
  91.  </li> 
  92.  <li><a class="hide" href="index.html">MENUS</a> 
  93.  
  94.  <!--[if lte IE 6]> 
  95.  <a href="index.html">MENUS 
  96.  <table><tr><td> 
  97.  <![endif]--> 
  98.   <ul> 
  99.   <li><a href="spies.html" title="a coded list of spies">spies menu</a></li> 
  100.   <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> 
  101.   <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li> 
  102.   <li><a href="enlarge.html" title="an unordered list with link images">link  
  103.     images</a></li> 
  104.   <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> 
  105.  
  106.   <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> 
  107.   <li><a href="circles.html" title="circular links">circular links</a></li> 
  108.   </ul> 
  109.  <!--[if lte IE 6]> 
  110.  </td></tr></table> 
  111.  </a> 
  112.  <![endif]--> 
  113.  </li> 
  114.  <li><a class="hide" href="../layouts/index.html">LAYOUTS</a> 
  115.  <!--[if lte IE 6]> 
  116.  <a href="../layouts/index.html">LAYOUTS 
  117.  <table><tr><td> 
  118.  <![endif]--> 
  119.  
  120.   <ul> 
  121.   <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed  
  122.     1</a></li> 
  123.   <li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li> 
  124.   <li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li> 
  125.   <li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li> 
  126.   <li><a href="../layouts/minimum.html" title="A simple minimum width layout"> 
  127.     minimum width</a></li> 
  128.  
  129.   </ul> 
  130.  <!--[if lte IE 6]> 
  131.  </td></tr></table> 
  132.  </a> 
  133.  <![endif]--> 
  134.  </li> 
  135.  <li><a class="hide" href="../boxes/index.html">BOXES</a> 
  136.  <!--[if lte IE 6]> 
  137.  <a href="../boxes/index.html">BOXES 
  138.  <table><tr><td> 
  139.  <![endif]--> 
  140.   <ul> 
  141.   <li><a href="spies.html" title="a coded list of spies">spies menu</a></li> 
  142.   <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> 
  143.  
  144.   <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li> 
  145.   <li><a href="enlarge.html" title="an unordered list with link images">link  
  146.     images</a></li> 
  147.   <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> 
  148.   <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> 
  149.   <li><a href="circles.html" title="circular links">circular links</a></li> 
  150.   </ul> 
  151.  
  152.  <!--[if lte IE 6]> 
  153.  </td></tr></table> 
  154.  </a> 
  155.  <![endif]--> 
  156.  </li> 
  157.  <li><a class="hide" href="../mozilla/index.html">MOZILLA</a> 
  158.  <!--[if lte IE 6]> 
  159.  <a href="../mozilla/index.html">MOZILLA 
  160.  <table><tr><td> 
  161.  <![endif]--> 
  162.   <ul> 
  163.   <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li> 
  164.   <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li> 
  165.  
  166.   <li><a href="../mozilla/content.html" title="Using content:">content:</a></li> 
  167.   <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie  
  168.     box</a></li> 
  169.   <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow  
  170.     box</a></li> 
  171.   <li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li> 
  172.   <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li> 
  173.   <li><a href="../mozilla/splittext.html" title="Two tone headings">two tone  
  174.     headings</a></li> 
  175.  
  176.   <li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li> 
  177.   </ul> 
  178.  <!--[if lte IE 6]> 
  179.  </td></tr></table> 
  180.  </a> 
  181.  <![endif]--> 
  182.  </li> 
  183.  <li><a class="hide" href="../ie/index.html">EXPLORER</a> 
  184.  <!--[if lte IE 6]> 
  185.  <a href="../ie/index.html">EXPLORER 
  186.  <table><tr><td> 
  187.  <![endif]--> 
  188.   <ul> 
  189.   <li><a href="../ie/exampleone.html" title="Example one">example one</a></li> 
  190.  
  191.   <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li> 
  192.   <li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li> 
  193.  </ul> 
  194.  <!--[if lte IE 6]> 
  195.  </td></tr></table> 
  196.  </a> 
  197.  <![endif]--> 
  198.  </li> 
  199.  <li><a class="hide" href="../opacity/index.html">OPACITY</a> 
  200.  <!--[if lte IE 6]> 
  201.  <a href="../opacity/index.html">OPACITY 
  202.  <table><tr><td> 
  203.  <![endif]--> 
  204.  
  205.  <ul> 
  206.  <li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li> 
  207.  <li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque  
  208.     menu</a></li> 
  209.  <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li> 
  210.  <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity  
  211.     II</a></li> 
  212.  </ul> 
  213.  <!--[if lte IE 6]> 
  214.  </td></tr></table> 
  215.  </a> 
  216.  <![endif]--> 
  217.  
  218.  </li> 
  219.  </ul> 
  220. </div> 
  221.  
  222. </body> 
  223. </html> 

参考资料：
http://hi.baidu.com/phpishard/blog/item/fa24f253019528040df3e3f3.html
http://bbs.blueidea.com/thread-2907402-1-1.html
http://www.6tianf.com/html/jbtx/cddh/28891.html

 

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
推荐内容
热点内容


关于我们 - 联系我们 - UNOVO社区 - UNovo家园 - 网站导航 - 旧版

Copyright © UNovo.cn Powered by DedeCMSV53_1_UTF8 DesDev Inc.