Проблема с наложением слоев с jQuery accordion и IE7
-
10-07-2019 - |
Вопрос
У меня странная проблема с плагином jQuery accordion и IE7 (и, возможно, ранее, я там не тестировал).Я использую настроенную тему пользовательского интерфейса jQuery, созданную с помощью ThemeRoller.Я немного подправил его, чтобы настроить цвета, поля и обрамления.Аккордеон расположен внутри DIV, который, в свою очередь, вложен в мой основной контент.Упрощенная разметка и CSS приведены ниже.По сути, содержимое представляет собой прямоугольник по центру, окруженный границами.Меню смещено ниже верхней части окна и плавает над левым краем.
Проблема в том, что в IE7, как только я навел курсор на меню, границы от базового main
Отображение DIV через аккордеон.Этого не происходит в FF или Safari.Вопрос в том, почему, поскольку accordion 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;
}
Решение
После попытки явно установить z-индекс для различных классов .ui-accordion, я решил создать резервную копию на один уровень.Оказывается, что установка z-индекса (равного 1) на main-menu
DIV решает проблему в IE7.Обратите внимание, что z-индекс в классе main .ui-accordion всегда был там.Применение класса ui-accordion к main-menu
div нарушает макет, и я решил, что проще просто добавить z-index в главное меню, а не пытаться переделать его так, чтобы оно работало с применяемым классом ui-accordion .