IE7 Z-Index проблема - контекстное меню - PullRequest
Новая
       31

IE7 Z-Index проблема - контекстное меню

2 голосов
/ 03 июня 2011

У меня есть следующая кнопка со связанным контекстным меню 

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

Есть идеи относительно того, что я делаю неправильно?1012 *

Ответы [ 4 ]

2 голосов
/ 03 июня 2011

Я решил эту проблему, изменив порядок элементов. Я удалил элемент относительной позиции из моей кнопки и меню и сделал его только родителем меню. 

    <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;
}
2 голосов
/ 03 июня 2011

IE7 имеет известные ошибки с z-index.

Не видя вашей полной страницы, лучшее, что я могу сделать, это указать вам на некоторые ресурсы, которые объясняют проблему:

Идея, в ее самой простой форме, состоит в том, чтобы проверить добавление / удаление position: relative и z-index на родительских элементах проблемного элемента, пока он не будет исправлен.

2 голосов
/ 03 июня 2011

IE до IE7 использует ближайшего предка для определения контекста стека. Ты видишь это и в IE6?

Поместите свою кнопку после ul и затем попробуйте.

0 голосов
/ 03 июня 2011
...