css - 另一个绝对定位 DIV 中的绝对定位 DIV 不会在 IE 上显示

Question

请引用http://stonepay.sonikastudios.com/css/style.css以及http://stonepay.sonikastudios.com/如果您愿意，可以获取实际的页面引用。

我有一个在点击时显示的下拉菜单。这适用于“我们的服务”和“我们的元素”菜单项，淡入和所有工作都很好。 div.submenu 元素作为不能与其他布局元素相互干扰的下拉菜单，都设置为position:absolute; (当然，父 div 设置为 position:relative；因此它不是页面的绝对值，而是菜单栏本身的值)。

div.submenu_close 元素嵌套在每个 div.submenu 实例的末尾。它还设置为 position:absolute;

总而言之，这是我的 CSS:

.submenu {
    position:absolute;
    width:auto;
    padding:0px 10px 0px 10px!important;
    background-image:url('/images/submenu_bg.jpg');
    background-repeat:repeat-x;
    z-index:99;
    background-color:#262626;
    display:none;
}

.submenu_column {
    margin-top:10px !important;
    margin-bottom:10px !important;
}

.submenu_close {
    width:11px !important;
    height:11px !important;
    background-image:url("/images/submenu_close.png");
    background-repeat:no-repeat;
    position:absolute;
    bottom:7px;
    right:7px;
    z-index:15 !important;
    border:1px solid #f00;
    display:block;
}

HTML 结构如下(简化以仅强调结构):

<div id="menubar">
    <ul id="menu">
        <li class="current originalcurrent"><a href="/">HOME</a></li>
        <li><a href="/about-us.php">ABOUT US</a></li>
        <li><a href="/our-services.php" id="services_menu" class="topmenu">OUR SERVICES</a></li>
        <li><a href="/our-projects.php" id="projects_menu" class="topmenu">OUR PROJECTS</a></li>
        <li><a href="/financing-leasing.php">FINANCING &amp; LEASING</a></li>
        <li><a href="/contact-us.php">CONTACT US</a></li>
    </ul>

    <div class="submenu" id="services_submenu">
        <div class="grid_3 alpha omega right_dotted submenu_column">
        </div>
        <div class="grid_3 omega right_dotted submenu_column" style="width:175px;">
        </div>
        <div class="submenu_close"><a href="#"><img src="/images/blank.gif" width="100%" height="100%"></a></div>
        <div class="clear"></div>
    </div>


    <div class="submenu" id="projects_submenu">
        <div class="grid_3 alpha omega right_dotted submenu_column">
        </div>
        <div class="grid_3 omega right_dotted submenu_column" style="width:175px;">
        </div>
        <div class="submenu_close"><a href="#"><img src="/images/blank.gif" width="100%" height="100%"></a></div>
        <div class="clear"></div>
    </div>
</div>

这使我的 .submenu_close div 在右下角显示得很好。除了在 Internet Explorer 上(当然又是 IE)。

如您所见，我已将 z-index 元素设置得很好。当我将 .submenu_close 的显示模式更改为 float:left 而不是 position:absolute 时，它​​显示得很好，所以我知道这不是 z-index 问题。

非常感谢任何帮助!

Answer 1

这可能是由于 a known bug in IE7 (见右侧栏) 关于嵌套的绝对、固定和相对 div。您解释的顺序与记录的不完全一致，但根据我的经验，如果您希望它在所有版本的 IE 中正常工作，则需要避免使用这些属性嵌套 div。