Проблема наслоения с аккордеоном jQuery и IE7 - PullRequest
Новая
       17

Проблема наслоения с аккордеоном jQuery и IE7

1 голос
/ 11 марта 2009

У меня странная проблема с плагином jQuery accordion и IE7 (а может и раньше, там не тестировали). Я использую настроенную тему пользовательского интерфейса jQuery, созданную с помощью ThemeRoller. Я немного его подправил, чтобы настроить цвета, поля и границы. Аккордеон находится внутри DIV, который, в свою очередь, вложен в мой основной контент. Упрощенная разметка и CSS ниже. По сути, контент представляет собой центрированный прямоугольник, окруженный границами. Меню смещено ниже верхней части окна и перемещается по левому краю.

Проблема в том, что в IE7, когда я наводил курсор на меню, границы от базового main DIV показывались через аккордеон. Этого не происходит в FF или Safari. Вопрос в том, почему, поскольку CSS по умолчанию для аккордеона устанавливает z-индекс равным 1? Разве все эти элементы не должны отображаться поверх элементов DOM позади них? А почему только на завис?

Я уже решил эту проблему и опубликую решение как ответ. 

<div id="main" style="position: relative;">
    <div id="main-menu">
        <ul id="navigation" class="ui-accordion">
            <li>
                <div class="ui-accordion-header">
                </div>
                <div class="ui-accordion-content">
                </div>
            </li>
        </ul>
    </div>
</div>

CSS 

#main
{
    clear: both;
    padding: 30px 30px 30px 30px;
    background-color: #fff;
    border: solid 1px #669933;
    margin-bottom: 30px;
    min-height: 500px;
    height: auto !important;
    height: 500px;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
}
#main-menu
{
    position: absolute;
    top: 1em;
    left: -1em;
}

#navigation
{
    width: 10em;
}

/*UI accordion*/
.ui-accordion {
    /*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.5; text-decoration: none; font-size: 100%; list-style: none;
    font-family: Verdana, Arial, sans-serif;
    font-size: 1.1em;
/* additions from default */
    background-color: #ffffff;
    color: #333333;
    border: solid 1px #336600;
    text-indent: 0.2em;
    z-index: 1;
}

1 Ответ

2 голосов
/ 11 марта 2009

После попытки явно установить z-index для различных классов .ui-accordion я решил сделать резервную копию на один уровень. Оказывается, что установка z-индекса (1) на main-menu DIV решает проблему в IE7. Обратите внимание, что z-index в основном классе .ui-accordion всегда был там. Применение класса ui-accordion к элементу main-menu нарушает компоновку, и я решил, что было бы проще просто добавить z-index и в главное меню, а не пытаться изменить его так, чтобы он работал с ui-accordion класс применяется.

...