Question

我有一些标记用于在Firefox中运行的弹出菜单，但不适用于IE。问题是弹出窗口弹出其他元素并且不受z-index值的影响。下面是一个完整的可运行示例。

现在，我知道一个修复不是将div定位为相对的，但我不能这样做，因为在实际代码中，我使用scriptaculous并且它添加了“position：relative”来做什么它需要做。此外，我认为这不重要。

是否有其他修复方法可以使此代码同时适用于IE和Firefox？

示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>IE Problem</title>
<style type="text/css">
.mydiv{
  position: relative;
  background: yellow;
  border: solid 1px black;
}
table{background:black;} 
td.menu{background:lightblue}
table.menu
{
  position:absolute;
  visibility:hidden;
  z-index:999;
}
</style>
<script type="text/javascript">
function showmenu(elmnt){
   document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt){
   document.getElementById(elmnt).style.visibility="hidden";
}
</script>
</head>

<body>
<div class="mydiv" onmouseover="showmenu('one')" onmouseout="hidemenu('one')">

   <a href="#">div one</a><br />
   <table class="menu" id="one" width="120">
     <tr><td class="menu"><a href="#">Item 1</a></td></tr>
     <tr><td class="menu"><a href="#">Item 2</a></td></tr>
   </table>

</div>
<div class="mydiv" onmouseover="showmenu('two')" onmouseout="hidemenu('two')">

   <a href="#">div two</a><br />
   <table class="menu" id="two" width="120">
     <tr><td class="menu"><a href="#">Item 1</a></td></tr>
     <tr><td class="menu"><a href="#">Item 2</a></td></tr>
   </table>

</div>  
</body>

</html>

Answer 1

如果父级的位置为：relative或position：absolute，则z-index的范围限定在父级内。

您的示例的解决方案是添加style =“z-index：2;”到第一个“mydiv”和z-index：1;到了第二个。

Answer 2

如果将TABLE移动到DIV之外，它就可以工作。希望这能满足您的需求吗？如果我是DIV，我想我也会感到困惑，你让我把Z-order命令包含在我之上。

IE CSS定位问题

2 个答案: