Internet Explorer Z-Index - PullRequest
Новая
       20

Internet Explorer Z-Index

0 голосов
/ 09 ноября 2011

Я написал крошечный JavaScript для этой стороны: http://www.tx -customers.com / ep-immobilien /? Page_id = 183 .

Теперь в Internet Explorer возникают проблемы со слоями, поэтому функции наведения не работают правильно. В верхней части изображений есть элементы списка, относящиеся к определенным изображениям, изменяющие класс этого изображения для просмотра. Это работает, но если вы щелкнете по одному изображению или активирует ползунок (через 3 секунды), li-элементы будут лежать позади показанного изображения. Работает в FF, Opera, Safari и Chrome. Я искал z-index. Временные решения пытались установить позиции и z-index, но ничего не изменилось.

Структура HTML: 

<div id="team">
    <div class="images">
        <img id="1-team-member-picture" class="team-member" src="img-src" rel="185">
        <li class="splitter" rel="1"></li>
        <img id="2-team-member-picture" class="team-member" src="img-src" rel="185">
        <li class="splitter" rel="2"></li>
        <div id="results">
            <p class="res"></p>
        </div>
        <p class="clear"></p>
    </div>
</div>

Код CSS: 

#team .images {
    float: left;
    background: url(images/gesamt_962px.png) no-repeat;
    position: relative;
    height: 382px;
    width: 769px;
    z-index: 5;
    padding-left: 64px;
}

#team .images img {
    height: 382px;
    position: relative;
    z-index: 4;
}

#team .images .team-member {
    position: absolute;
    display: none;
    left: 32px;
}

#team .images .current, #team .images .clicked {
    display: inline;
}

#team .images li {
    width: 30px;
    height: 382px;
    float: left;
    position: relative;
    z-index: 20;
    list-style-type: none;
}

CSS-код для IE (попытка): 

#mainwrap {
    font: 14px/20px Times New Roman, Times, sans-serif;
}

#team {
    width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 20;
}

#team .images {
    margin: 0 auto;
    background: url(images/gesamt_962px.png) no-repeat;
    position: relative;
    height: 382px;
    width: 769px;
    padding-left: 64px;
    z-index: 10;
}

#team .images .team-member {
    position: absolute;
    display: none;
    left: 32px;
    z-index: 0 !important;
}

#team .images .current, #team .images .clicked {
    position: absolue;
    display: inline;
    z-index: 0 !important;
}

#team .images li {
    width: 30px;
    height: 382px;
    float: left;
    list-style-type: none;
    position: relative;
    z-index: 1 !important;
}

И это сценарий: http://www.tx -customers.com / ер-Immobilien / WP-содержание / темы / эпи / JS / teamSlider.js

Это моя первая попытка в JS, поэтому, пожалуйста, не вините меня за какое-то глупое кодирование! : P

Часть JS, где используется Hover. 

jQuery($splitter).mouseover( function () {
    if(!$clicked) stopAnimate();
    slideRemoveClass("current");
    $('#' + $(this).attr('rel') + '-team-member-picture').addClass("current");
});

jQuery($splitter).mouseleave( function () {
    if(!$clicked) animate();
    slideRemoveClass("current");
    $('#' + $(this).attr('rel') + '-team-member-picture').removeClass("current");
});

function animate() {
    clearTimeout(interval);
    interval = setTimeout( slide, $delay );
}

function stopAnimate() {
    clearTimeout(interval);
}

1 Ответ

1 голос
/ 09 ноября 2011

Z-индексирование ... странно, из-за отсутствия более подходящего слова в IE.

Короче говоря, для правильного использования z-indexing с IE каждый задействованный элемент (от родителя до потомка) должен иметь z-index (иногда вплоть до тела).

Этот вопрос отлично ответил на этот вопрос: Проблемы с наложением Z-индекса в IE7

...