IE CSS定位问题_Css_Internet Explorer

IE CSS定位问题

css internet-explorer

IE CSS定位问题,css,internet-explorer,Css,Internet Explorer,我有一些在firefox中工作的弹出菜单的标记，但不是IE。问题是弹出菜单在其他元素下弹出，并且不受z索引值的影响。下面是一个完整的可运行示例现在，我知道一个修复方法不是将div定位为相对的，但我不能这样做，因为在实际代码中，我使用scriptaculous，它添加了“position:relative”来完成它需要做的事情。此外，我认为这不重要是否有其他修复程序可以使此代码同时适用于IE和firefox 例如： <!DOCTYPE html PUBLIC "-//W3C//DTD X

我有一些在firefox中工作的弹出菜单的标记，但不是IE。问题是弹出菜单在其他元素下弹出，并且不受z索引值的影响。下面是一个完整的可运行示例

现在，我知道一个修复方法不是将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>


IE问题
mydiv先生{
位置：相对位置；
背景：黄色；
边框：实心1px黑色；
}
表{背景：黑色；}
td.菜单{背景：浅蓝色}
餐桌菜单
{
位置：绝对位置；
可见性：隐藏；
z指数：999；
}
功能显示菜单（elmnt）{
document.getElementById（elmnt.style.visibility=“visible”；
}
函数hidemenu（elmnt）{
document.getElementById（elmnt.style.visibility=“hidden”；
}

如果您将表移到div之外，它会工作。希望这能满足你的需要？我想如果我是一个DIV，而你让我对我上面包含的东西进行Z-排序，我也会感到困惑。

如果你把桌子移到DIV之外，它就会工作。希望这能满足你的需要？如果我是一个DIV，而你让我对我上面包含的东西进行Z排序，我想我也会感到困惑。

如果父对象具有position:relative或position:absolute，则Z索引的范围是在父对象内

示例的解决方案是将style=“z-index:2；”添加到第一个“mydiv”和z-index:1；到第二个。

如果父级具有位置：相对或位置：绝对，则z索引的范围在父级内

示例的解决方案是将style=“z-index:2；”添加到第一个“mydiv”和z-index:1；到第二个。

问题在于，菜单是div的一部分，这一点您不可能知道。我使用scriptaculous来允许移动div。如果有人移动div，我希望菜单与之匹配。当div悬停在上方时，我可能会移动菜单。问题是，菜单是div的一部分。我使用scriptaculous来允许div移动。如果有人移动div，我希望菜单与之匹配。当div悬停在上方时，我可能会移动菜单。这就是我的答案。虽然当我移动鼠标时，IE下的下拉菜单有点闪烁，但似乎可以工作。这就是我的答案。当我移动鼠标时，虽然IE下的下拉菜单有点闪烁，但似乎工作正常。