IE7 Z-Index问题 - 上下文菜单 [英] IE7 Z-Index issue - Context Menu

问题描述

我有以下按钮和相关的上下文菜单

I have the following button with associated context menu

    <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

When the button is clicked the associated ul shows beneath it as a context menu.

在IE7以外的所有浏览器上都可以正常工作。在IE7中，上下文菜单（ul）显示在下面的按钮下面。我想这可能是由于堆叠上下文如何解决这些元素。

This is working great on all browsers except IE 7. In IE7 the context menu (ul) shows beneath the button below it. I imagine this is likely due to how the stacking context is resolving these elements.

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

My css currently looks like this:

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

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

有什么想法我做错了什么？

Any ideas as to what I'm doing wrong?

推荐答案

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

I have resolved this by changing the element ordering. I have removed the relative position element from containing both my button and menu, and made it only the parent of menu.

    <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已更改为以下内容：

With this markup change the css has changed into the following:

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

这篇关于IE7 Z-Index问题 - 上下文菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！