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

IE到IE7使用最近的定位祖先来确定堆叠上下文。你在IE6中看到了吗？

将你的按钮放在ul之后然后试一试。

Answer 2

IE7已知道z-index的错误。

如果没有看到整页，我能做的最好的事情就是为您提供一些解释问题的资源：

这个想法最基本的形式是测试在问题元素的父元素上添加/删除position: relative和z-index，直到它被修复。

Answer 3

我通过更改元素排序来解决这个问题。我已经删除了包含我的按钮和菜单的相对位置元素，并使其只是菜单的父级。

    <div class="control-action" style="float:right"> 
        <div class="control-action-menu">
            <ul style="display:none">
                <li class="action-remove">Remove</li>
                <li class="action-detail">Detail</li>
                <li class="action-assigned">Assign</li>
            </ul>
        </div>
        <button>Action</button> 
    </div>

通过此标记更改，css已更改为以下内容：

.control-action
{
    text-align:right;
    width:100px;    
}

.control-action-menu
{
    position:relative;
    z-index:1;
}

.control-action ul
{
    position:absolute;
    z-index: 10000;
    list-style:none;
}

Answer 4

可能是hasLayout错误。

这可能有所帮助：IE7 relative/absolute positioning bug with dynamically modified page content

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

4 个答案: