Question

如果您愿意，请参阅http://stonepay.sonikastudios.com/css/style.css以及http://stonepay.sonikastudios.com/了解实际页面参考。

我有一个显示单击的下拉菜单。这适用于“我们的服务”和“我们的项目”菜单项，淡入和所有工作都很好。作为不能阻碍其他布局元素的下拉菜单，div.submenu元素都设置为position：absolute; （当然，父div设置为position：relative;所以它对于页面不是绝对的，而是对于菜单栏本身而言。）

div.submenu_close元素嵌套在每个div.submenu intsance的末尾。它也设置为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。

Answer 2

问题是由IE6/7 broken stacking order（也称为z-index错误）引起的。您需要解决的问题是将关闭按钮的z-index提升到超过其容器的范围。

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

2 个答案: