z-index 버그로 인해 누적 메뉴가 작동하지 않습니다.

Question

최근에 동료가 작업하고있는 프로젝트를 인수했으며 IE 7 버그 형태로 벽돌 벽에 맞서 왔습니다. 기본적으로, 각 li 내부에 배경 이미지가있는 링크가있는, 3 개의 UL이 서로 겹쳐진 (뒤쪽, 가운데, 앞쪽) 스택이있는 div가있는 페이지를 작성하고 있습니다.

내가 원하는 것은 링크 중 하나를 넘기면 Z- 색인이 다른 모든 lis보다 높게 설정되고 따라서 li은 어떤 행이든 상관없이 앞쪽으로 가져옵니다. IE8 & 크롬에서 완벽하게 처리했지만 IE6 & 7은 단순히 공을 재생하지 않습니다.

여기에 언급 된 z- 색인 버그 : http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/에 대해 알고 있으며, 리의 z- 색인 값을 a보다 높게 설정하면 문제를 해결하려고 노력했지만 아무런 문제가 없습니다. 내가 리를 앞쪽으로 가져올 수있는 유일한 방법은 ul 그 자체에 높은 가치를 두는 것입니다.하지만 물론 이것은 내가 원하지 않는 전면에 링크를 가져옵니다. 어떤 아이디어?

<div class="noMouseOut thumbnailWrap"> 
    <ul class="thumbnail_list noMouseOut back" style="width: 480px; left: 210px;"> 
     <li style="left: -48px;"><a style="background-image: url("images/back1.jpg"); width: 96px; height: 126px;" class="replace rollover" title="back row 1" href="">back row 1</a></li> 
     <li style="left: 433px;"><a style="background-image: url("images/back3.jpg"); width: 94px; height: 112px;" class="replace rollover" title="back row 4" href="">back row 4</a></li> 
    </ul> 
    <ul class="thumbnail_list noMouseOut middle" style="width: 680px; left: 130px;"> 
     <li style="left: -60px;"><a style="background-image: url("images/middle1.jpg"); width: 120px; height: 86px;" class="replace rollover" title="Middle 1" href="">Middle 1</a></li> 
     <li style="left: 131px;"><a style="background-image: url("images/middle2.jpg"); width: 78px; height: 104px;" class="replace rollover" title="Middle 2" href="#slide2">Middle 2</a></li> 
     <li style="left: 301px;"><a style="background-image: url("images/middle3.jpg"); width: 78px; height: 103px;" class="replace rollover" title="Middle 3" href="">Middle 3</a></li> 
    </ul> 
    <ul class="thumbnail_list noMouseOut front" style="width: 480px; left: 230px;"> 
     <li style="left: -25px;"><a style="background-image: url("images/front1.jpg"); width: 51px; height: 74px;" class="replace rollover" title="Front 1" href="">Front 1</a></li> 
     <li style="left: 135px;"><a style="background-image: url("images/front2.jpg"); width: 51px; height: 65px;" class="replace rollover" title="Front 2" href="">Front 2</a></li> 
    </ul> 
</div> 

는 CSS는 다음과 같다 :

#slideshow_menu ul.thumbnail_list { 
    position: relative; 
    display: inline-block; 
    float: left; 
    padding: 0px; 
    margin: 0px; 
    list-style: none; 
    height: 128px; 
    } 

#slideshow_menu ul.thumbnail_list li { 
    float:left; 
    margin: 0px 2px; 
    } 

#slideshow_menu ul.thumbnail_list li a { 
    display: block; 
    } 


#slideshow_menu ul.back, #slideshow_menu ul.middle, #slideshow_menu ul.front { 
    position: absolute; 
    bottom: 0px; 
    height: 1%; 
    } 

#slideshow_menu ul.back li { 
    position:absolute; 
    bottom: 0px; 
    } 

#slideshow_menu ul.back li a { 
    height: auto; 
    display: block; 
    z-index: 20; 
    position: relative; 
    } 

#slideshow_menu ul.middle li { 
    position:absolute; 
    bottom: 0px; 
    } 

#slideshow_menu ul.middle li a { 
    height: auto; 
    display: block; 
    z-index: 30; 
    position: relative; 
    } 

#slideshow_menu ul.front li { 
    position:absolute; 
    bottom: 0px; 
    } 

#slideshow_menu ul.front li a { 
    height: auto; 
    display: block; 
    z-index: 40; 
    position: relative; 
    } 

#slideshow_menu ul.thumbnail_list li a:hover { 
    z-index: 80; 
    } 

내가 링크를 게시 할 것입니다하지만, 그래서 여기에 방화벽 외부에 액세스 할 수없는 직장에서 우리의 개발 서버에 내 HTML 코드입니다

여러분이 저에게 줄 수있는 도움이 크게 주어질 것입니다.

Answer 1

IE는 동일한 DOM 수준의 요소 색인을 비교합니다. 가장 쉬운 방법은 (그리고 지금 생각할 수있는 유일한 방법입니다 - 예 ... IE 6/7 z-index에는 몇 가지 문제가 있습니다.) 원하는 것을 얻으려면 같은 ul에있는 모든 li을 다시 생각해 보는 것입니다. 너무 많은 문제를 일으키지 않아야하며 문제를 해결할 수 있습니다.