css下拉div在IE9中不起作用答案

【问题标题】：css drop down div not working in IE9css下拉div在IE9中不起作用
【发布时间】：2012-09-06 14:18:17
【问题描述】：

我有一个 div，当您将鼠标悬停时，它会出现一个子 div 来显示信息。基本代码如下：

HTML

<div id="container">
    <div id="hidden_div">
        <iframe></iframe>
    </div>
</div>

CSS

#container {
    position: absolute;
    height: 20px;
    width: 40px;
    top: 8px;
    left: 30px;
}

#hidden_div {
    position: absolute;
    background: url(../_images/inside_btn_back.png) repeat;
    height: 60px;
    width: 350px;
    top: 0px;
    left: 0px;
    margin-top: 20px;
    z-index: 50;
    display: none;
    border: 1px solid #a08f89;
}

#container:hover #hidden_div, #container.over #hidden_div, #container:focus #hidden_div {
    display: block;
}

这适用于除 IE 之外的所有浏览器（特别是 IE9）。我有一个使用相同方法的导航窗口，用于在 IE 中正常工作的下拉菜单。不知道为什么它不能与 div 一起使用。这是指向实时页面here 的链接。鼠标悬停在 div 上是页面底部附近的 facebook like 按钮。

【问题讨论】：

我刚刚在IE中试了一下，在IE9下完美运行，在IE8中没有内容在IE7中失败，在Quirks模式下失败。
z-index 是干什么用的？也代替top: 0px; margin-top: 20px;，你只能使用 - 在你的情况下 - top:100%
当我在 IE9 中打开我的页面时，鼠标悬停一直有效，直到您尝试将鼠标悬停在隐藏的 div 上，然后 div 消失，这使得您实际上无法单击 facebook like 按钮。
Z-index 是为了确保隐藏的 div 显示在其他内容之上。
只是想清除一些东西，Z-Index 用于“深度”。它使事物显示在彼此的前面或后面。 z-index 越高，越靠近前面。 “...显示在其他内容之上”让我认为您在谈论垂直平面（y 轴），而实际上您在谈论深度平面（z 轴）。

标签： html css internet-explorer internet-explorer-9

【解决方案1】：

iframe 中加载的页面没有透明背景，导致在 IE 中悬停失败。

【讨论】：