求兼容！看段代码解决办法-HTML教程-爱易网页

求兼容！看段代码解决办法

日期：2014-05-17　浏览次数：20619 次

求兼容！看段代码
今天做个仿菜单效果，本来意思是鼠标移动到菜单上，弹出对应的层挡住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"onmouseo

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

求兼容！看段代码解决办法

相关资料更多>

推荐阅读更多>