css下拉div不能在IE9中工作 [英] css drop down div not working in IE9

问题描述

我有一个div，当你的鼠标悬停时，一个子div似乎显示信息。基本代码如下：

I have a div that when you mouseover has a child div appear to display information. The basic code is as follows:

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合作。以下是此处实时页面的链接。 div上方的鼠标是页面底部附近的facebook like按钮。

This works in all browsers except IE(specifically IE9). I have a navigation window using the same method for a drop down menu that works fine in IE. don't know why its not working with the div. Here is a link to the live page here. The mouse over div is the facebook like button near the bottom of the page.

推荐答案

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

it's the page loaded in the iframe not having a transparent background which causes the hover to fail in IE.

这篇关于css下拉div不能在IE9中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！