求兼容！看段代码
今天做个仿菜单效果，本来意思是鼠标移动到菜单上， 弹出对应的层 挡住comr0层的部分内容，鼠标移开后，继续显示comr0层。谷歌浏览器 试用OK ie8 好像不行 ，弹出的内容到一边去了，我想是那个坐标的问题，但是因为网页时居中显示的，横坐标不好确定啊
代码如下
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title></head><body><style type="text/css"><!--#com{ width:980px; margin:0px auto 0; background:transparent; height:800px; color:#000;overflow:hidden;}#comlist{width:980px; height:30px; border:1px solid #cccccc;border-top-width:0px;border-right-width:0px;border-left-width:0px;border-bottom-width:1px;padding:5px 0px 0px 0px;font-size:14px;font-weight:bold;}#comr0 { width:980px; height:520px;background:#333333; text-align:left; position:relative;float: left; border:1px solid #cccccc;border-top-width:0px;border-right-width:0px;border-left-width:0px;border-bottom-width:1px;border-color:#cccccc;overflow:hidden;}#comr1 { width:980px; height:400px;background:#f8f9fa; text-align:left; position:absolute;top:51px;float: left;border:1px solid #cccccc;border-top-width:0px;border-right-width:1px;border-left-width:1px;border-bottom-width:1px;border-color:#cccccc;}#comr2 { width:980px; height:400px;background:#f8f9fa; text-align:left; position:absolute;top:51px;float: left; border:1px solid #cccccc;border-top-width:0px;border-right-width:1px;border-left-width:1px;border-bottom-width:1px;border-color:#cccccc; }#comr3 { width:980px; height:400px;background:#f8f9fa; text-align:left; position:absolute;top:51px; float: left;border:1px solid #cccccc;border-top-width:0px;border-right-width:1px;border-left-width:1px;border-bottom-width:1px;border-color:#cccccc;}#comr4 { width:980px; height:400px;background:#f8f9fa; text-align:left; position:absolute;top:51px; float: left;border:1px solid #cccccc;border-top-width:0px;border-right-width:1px;border-left-width:1px;border-bottom-width:1px;border-color:#cccccc;}#comr5 { width:980px; height:400px;background:#f8f9fa; text-align:left; position:absolute;top:51px; float: left;border:1px solid #cccccc;border-top-width:0px;border-right-width:1px;border-left-width:1px;border-bottom-width:1px;border-color:#cccccc;}.comfit {color: #000000;}.selected{color: #fff;}--></style><div id="com"><div id="comlist"><span class="comfit" onmouseover="showContent('0')" id="nav0" style="cursor:hand"><a href="#">菜单1</a></span> | <span class="comfit" onmouseover="showContent('1')" id="nav1" style="cursor:hand"><a href="#">菜单2</a></span> | <span class="comfit" onmouseover="showContent('2')" id="nav2" style="cursor:hand"><a href="#">菜单3</a></span> | <span class="comfit" onmouseover="showContent('3')" id="nav3" style="cursor:hand"><a href="#">菜单4</a></span> | <span class="comfit" onmouseover="showContent('4')" id="nav4" style="cursor:hand"><a href="#">菜单4</a></span></div> <div id="comr0"> </div> <div id="content0" style="display:none;"> <div id="comr1"onmouseout ="hideContent('0')"> </div> </div> <div id="content1" style="display:none;"> <div id="comr2"onmouseout ="hideContent('1')"> </div> </div> <div id="content2" style="display:none;"> <div id="comr3"onmouseout ="hideContent('2')"> </div> </div> <div id="content3" style="display:none;"> <div id="comr4"onmouseout ="hideContent('3')"> </div> </div> <div id="content4" style="display:none;"> <div id="comr5"onmouseout ="hideContent('4')"> </div> </div><script language="JavaScript"><!--function showContent(id) { for (var i = 0;i < 5;i++) { var nav = document.getElementById("nav" + i); var content = document.getElementById("content" + i); if (i == id) { nav.className = 'selected'; content.style.display = ""; } else { nav.className = 'comfit'; content.style.display = "none"; } } }function hideContent(id) { for (var i = 0;i < 5;i++) { var nav = document.getElementById("nav" + i); var content = document.getElementById("content" + i); if (i == id) { nav.className = 'selected'; content.style.display = "none"; } else { nav.className = 'comfit'; content.style.display = "none"; } } }//--> </script> <div class="clear"></div></div></body></html>
[解决办法]
测试了下 IE8 没问题。 不过这段JS用户体验是在不怎么好。。。。CSS也写的太乱了。蛋疼。。
楼主出现上面这个问题。 是因为relative和absolute 设置的不对。设置relative的层一定是里面包含了absolute 得层。 不是2个独立的。。也就是comr0 这个一定要把content0 到5之间的代码包起来。
而且要写上absolute 的层要写上left:0 这样效果就好了。