本文提供了解决Div菜单与SOAOffice客户端控件优先级冲突的技术方案，通过在层中加入优先级更高的iframe元素，确保菜单在控件之上显示。示例代码和步骤详述。
解决问题：由于层与控件之间的优先级是：控件 > 层，因此在显示的时候，会因为优先级的次序而会出现如上问题。（如果几个元素都是层的话，我们可以通过层的 z-index 属性来设置）解决办法就是：给层中放一个优先级比控件更高的元素（iframe），从而解决此问题！具体解决代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<a href="#" onmouseover="document.getElementById('menu').style.visibility='visible'" onmouseout="document.getElementById('menu').style.visibility='hidden'" title="这个菜单展示了如何制作能够浮在SOAOffice客户端控件之上的div菜单">div菜单导航栏</a>
<div id="menu" style="position:absolute; visibility:hidden; top:33px; left:10px; width:150px; height:200px; background-color:#6699cc;" onmouseover="document.getElementById('menu').style.visibility='visible'" onmouseout="document.getElementById('menu').style.visibility='hidden'">
<table>
<tr><td height="30px"><a href="http://www.kehansoft.com/soaoffice/doclist.asp">协同办公应用示例</a></td></tr>
<tr><td height="30px"><a href="http://www.kehansoft.com/soaexcel/login.asp">Excel销售订单示例</a></td></tr>
<tr><td height="30px"><a href="http://www.kehansoft.com/soaword/index.asp">Word数据填充示例</a></td></tr>
<tr><td height="30px"><a href="http://www.kehansoft.com/soapdf/pdflist.asp">PDF在线阅读示例</a></td></tr>
<tr><td height="30px"><a href="http://www.kehansoft.com/knowledge/doclist.asp">文档在线安全浏览</a></td></tr>
</table>
<iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:150px; height:200px; z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"></iframe>
</div>
<OBJECT id="SOAOfficeCtrl" codeBase="SOAOffice.ocx#version=7,1,1,0" height="100%" width="100%" classid="clsid:FABFB7B0-B15E-413C-94BC-96D21EC78712" data="" VIEWASTEXT>
<div align=center STYLE="color:red;">本机尚未安装SOAOFFICE客户端控件，请安装浏览器上方黄色提示条或弹出提示框中的SOAOFFICE客户端控件。</div>
</OBJECT>
</body>
</html>
用以上代码新建一个menu.htm，在浏览器里访问，你会看到很好的运行效果。
以上html都是做Div菜单的通常代码，其中添加的关键语句是
<iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:150px; height:200px; z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"></iframe>
将这句代码结合到你的代码里即可解决问题。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
