Сложенное меню не будет работать в ie7 из-за ошибки z-index - PullRequest
Новая
       5

Сложенное меню не будет работать в ie7 из-за ошибки z-index

0 голосов
/ 15 февраля 2011

Недавно я взял на себя проект, над которым работал коллега, и натолкнулся на кирпичную стену в виде ошибки IE 7.По сути, я создаю страницу, у которой в нижней части есть div с 3 UL, расположенными друг над другом внутри (сзади, посередине, спереди), со ссылкой с фоновым изображением внутри каждого li.

ЧтоЯ хочу достичь, когда вы переворачиваете одну из ссылок, тогда ее z-индекс устанавливается выше, чем у всех других lis, и, таким образом, li выводится на передний план, независимо от того, в какой строке он находится. Мне удалосьсделать это отлично в FF, IE8 и Chrome, но IE6 & 7 просто не играют в мяч.

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

Я бы опубликовал ссылку, но она находится на нашем сервере разработки на работе, который не доступен за пределами брандмауэра, поэтому вот мой HTML-код: 

<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;
    }

Любая помощь, которую вы, ребята, можете оказать мне, будет принята.

1 Ответ

0 голосов
/ 15 февраля 2011

IE сравнивает индексы элементов на одном уровне DOM. Самый простой способ (и единственный, о котором я могу думать сейчас - и да ... В IE 6/7 z-index есть некоторые проблемы) добиться того, чего вы хотите, это переосмыслить это со всеми li в одном и том же ul. Это не должно доставить вам слишком много неприятностей и решить проблему.

...