jQuery Accordion 및 IE7의 레이어링 문제

Question

jQuery Accordion 플러그인과 IE7에 이상한 문제가 있습니다 (아마도 이전에는 테스트하지 않았을 것입니다). Themeroller와 함께 구축 된 맞춤형 jQuery UI 테마를 사용하고 있습니다. 색상, 여백 및 국경을 조정하기 위해 일부 조정했습니다. 아코디언은 DIV 내부에 위치하고 있으며, 그 결과 내 주요 내용 안에 중첩되어 있습니다. 단순화 된 마크 업 및 CSS는 다음과 같습니다. 기본적으로 내용은 국경으로 둘러싸인 중앙 상자입니다. 메뉴는 상자 상단 아래로 오프셋되어 왼쪽 가장자리 위로 떠 다니고 있습니다.

문제는 IE7에서 메뉴 위로 떠오른 후에는 기본의 경계가 main 아코디언을 통해 디바이 쇼. 이것은 FF 또는 사파리에서 발생하지 않습니다. 문제는 기본 아코디언 CSS가 z-index를 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;
}

Answer 1

다양한 .ui-accordion 클래스에서 명시 적으로 z-index를 설정하려고 시도한 후, 나는 한 레벨을 백업하기로 결정했습니다. z- 안덱 (1)을 main-menu DIV는 IE7에서 문제를 해결합니다. 메인 .ui-accordion 클래스의 z-index는 항상 존재했습니다. UI-accordion 클래스를 main-menu Div는 레이아웃을 깨뜨리고 UI-Accordion 클래스와 함께 작동하도록 재목을 다시 만들기보다는 메인 메뉴에 z-index를 추가하는 것이 더 쉽다고 생각했습니다.