Текст в выпадающем меню, игнорирующий z-index в IE7 - PullRequest
Новая
       41

Текст в выпадающем меню, игнорирующий z-index в IE7

0 голосов
/ 08 февраля 2012

Проблема: текст подменю в «уровне 2» находится перед текстом подменю в «уровне 3».Как ни странно, ul нет, просто текст.

http://i41.tinypic.com/ajuhz6.jpg

Я знаю, что в IE7 есть ошибка, связанная с z-index.Обычно в этой ситуации я решал бы проблему в IE7, давая одному из внешних контейнеров более высокий z-индекс, чем дочерние.

Если кто-то читает это, потому что у него есть та же проблема, я рекомендую попробовать это сначала:- http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

Пока у меня ничего не получалось, и я попробовал много решений, опубликованных в Stack Overflow и в других местах.

Вот мой код ... У меня есть простое многоуровневое раскрывающееся меню со следующей HTML-структурой: 

<div id="wdk_header-container">

<div>...</div>

<div class="wdk_menu-container">

    <ul class="wdk_menu-ul wdk_tier_1">
        <li class="wdk_menu-item wdk_level_1">

            <a href="/"><span>Menu Text</span></a>

            <ul class="wdk_sub_menu wdk_tier_2">
                <li class="wdk_menu-item wdk_level_2">

                    <a href="/"><span>Menu Text</span></a>

                    <ul class="wdk_sub_menu wdk_tier_3">
                        <li class="wdk_menu-item wdk_level_3">

                            <a href="/"><span>Menu Text</span></a>

                        </li>
                    </ul>

                </li>
            </ul>

        </li>
    </ul>

</div>


<div>...</div>
<div>...</div>


</div>

Я не могу редактировать структуру меню.Как вы можете видеть, в самом внешнем контейнере есть и другие div-ы.

Я использую следующий jQuery для отображения и скрытия уровней меню: 

$(function(){

$("ul.wdk_menu-ul li").hover(function(){

    $('ul:first',this).css('visibility', 'visible');

}, function(){

    $('ul:first',this).css('visibility', 'hidden');

});

});

Следующий CSS отлично работает в Firefoxи Chrome, но не в IE7. 

<style>

/* All Menu Items */
.wdk_menu-container ul {
    list-style: none; display: inline;
    margin: 0px; padding: 0px;
}
.wdk_menu-container ul li {
    float: left; height: 33px; position: relative; display: block;
}
.wdk_menu-container ul li a {
    display: block; height: 100%;
}

/* Sub Menu */
ul.wdk_sub_menu.wdk_tier_2 {
    float: left; z-index: 5; position: absolute;
}

ul.wdk_sub_menu.wdk_tier_2 a {
    line-height: 16px; padding: 6px 10px;
}

.wdk_menu-container ul.wdk_sub_menu.wdk_tier_2 li a span {
    display: inline-block;
}

/* Sub Sub Menu */
ul.wdk_sub_menu.wdk_tier_3 {
    float: left; z-index: 6; position: absolute; left: 34px;
}

</style>

Я буду создавать отдельную таблицу стилей для IE7.Любые предложения приветствуются, это сводит меня с ума.Если вам нужна дополнительная информация, пожалуйста, спросите!Спасибо!

1 Ответ

0 голосов
/ 08 февраля 2012

У вас есть эта проблема, потому что у вас есть позиция: абсолютная применяется к элементам вместе с z-index. Это не работает в IE7. Вместо этого вам нужно использовать position: относительный (и найти другой способ разумного позиционирования ваших подменю). http://www.shawnpreisz.com/css/z-index-internet-explorer-7-ie7

...