IE7 Z-Index问题-上下文菜单

Question

我有以下带有关联上下文菜单的按钮

    <div class="control-action"> 

        <button>Action</button> 

        <ul style="display:none">

            <li class="action-remove">Remove</li>

            <li class="action-detail">Detail</li>

            <li class="action-assigned">Assign</li>

        </ul>

    </div> 

单击该按钮时，关联的内容ul在其下方显示为上下文菜单。

在IE 7以外的所有浏览器上，此功能都非常有效。在IE7中，上下文菜单（ul）显示在其下方的按钮下方。我想这可能是由于堆栈上下文如何解析这些元素。

我的CSS目前看起来像这样：

.control-action

{

    position: relative;

    text-align:right;

    width:100px;    

}

.control-action ul

{

    position:absolute;

    z-index: 10000;

    list-style:none;

}

关于我在做什么错的任何想法吗？

Answer 1

IE7之前的IE使用最接近的祖先来确定堆栈上下文。您也在IE6中看到吗？将按钮放在ul之后，然后尝试。

Answer 2

我已经通过更改元素顺序解决了这一问题。我已经从同时包含按钮和菜单中删除了相对位置元素，并使其仅成为菜单的父元素。&nbsp; &nbsp; <div class="control-action" style="float:right">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <div class="control-action-menu">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul style="display:none">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="action-remove">Remove</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="action-detail">Detail</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="action-assigned">Assign</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <button>Action</button>&nbsp;&nbsp; &nbsp; </div>&nbsp;通过此标记更改，css已更改为以下内容：.control-action{&nbsp; &nbsp; text-align:right;&nbsp; &nbsp; width:100px;&nbsp; &nbsp;&nbsp;}.control-action-menu{&nbsp; &nbsp; position:relative;&nbsp; &nbsp; z-index:1;}.control-action ul{&nbsp; &nbsp; position:absolute;&nbsp; &nbsp; z-index: 10000;&nbsp; &nbsp; list-style:none;}