IE CSS定位问题答案

【问题标题】：IE CSS positioning problemIE CSS定位问题
【发布时间】：2009-05-27 16:08:11
【问题描述】：

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

现在，我知道一个解决方法是不要将 div 定位为相对，但我不能这样做，因为在实际代码中，我使用的是 scriptaculous，它添加了“位置：相对”来做什么它需要做。此外，我认为这无关紧要。

是否有其他修复可以使此代码同时适用于 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>

【问题讨论】：

标签： css internet-explorer

【解决方案1】：

如果父级具有 position: relative 或 position: absolute，则 z-index 的范围在父级内。

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

【讨论】：

这是我的答案。似乎可以工作，尽管当我移动鼠标时，IE 下的下拉菜单有点闪烁。

【解决方案2】：

如果您将 TABLEs 移到 DIVs 之外，它会起作用。希望这能满足您的需求？我想如果我是一个 DIV 并且你让我对我上面包含的东西进行 Z 排序，我也会感到困惑。

【讨论】：

问题在于菜单是 div 的一部分，而不是你可能知道的。我正在使用 scriptaculous 来移动 div。如果有人移动 div，我希望菜单与它一起使用。当 div 悬停在上面时，我也许可以移动菜单。