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

小编典典

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

css

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

    <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;
}

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

阅读 275

2020-05-16

共1个答案

小编典典

我已经通过更改元素顺序解决了这一问题。我从同时包含按钮和菜单中删除了相对位置元素，并使其仅作为菜单的父元素。

    <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;
}

2020-05-16