Z-индекс ведет себя по-разному в Firefox

Question

у меня есть следующий код

#flipper #Front {
    z-index:81;
}
#flipper #Back {
    z-index:80;
}
.face{
    position:absolute;
    width:100%;
    height:100%;
}
.front{
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}
#flipper > * {
    max-width:100px;
    cursor:pointer;
}


       <div id='flipper'>
        <div id='Front' class='front face'>
            <img src='images/front.gif'>
        </div>
        <div id='Back' class='back face'>
            <img src='images/back.gif'>
            <a href="/link" title="get in /here/" style="position: relative; top: -100px; display:none;">peek</a>
        </div>

    </div>

и скрипт

/* flip */

function flipOwlly() {
        if (Side=='front') {
                jQuery('#flipper').css('-webkit-transform','rotateY(180deg)');
                jQuery('#flipper').css('-moz-transform','rotateY(180deg)');
                jQuery('#Front').css('z-index','79');
                jQuery('#flipper a[href="/login"]').css('display', 'inline-block');
                Side = 'back';
        } else {
                jQuery('#flipper').css('-webkit-transform','rotateY(360deg)');
                jQuery('#flipper').css('-moz-transform','rotateY(360deg)');
                //setTimeout(jQuery('#Front').css('z-index','81'), 550);
                jQuery('#Front').css('z-index','81');
                owllySide = 'front';
        }
        return false;
}

ИЗМЕНЕНО ДЛЯ ДОБАВЛЕНИЯ КОДА JS

и у меня есть код jquery для запуска анимации css для переворачивания всего элемента #flipper, а затем изменения переднего z-index на 79 [и обратно].

Моя проблема в том, что это отображается по-разному в Firefox и Chrome. в Firefox, более высокий номер z-index отправьте мое изображение обратно! поэтому, когда страница загружается, логический порядок в порядке, но заднее изображение находится сверху на передней части ....

даже в IE это нормально! что происходит?

Answer 1

Размещение вашего кода JQuery может помочь. Во всяком случае, я тестировал перелистывание z-индекса, и он , кажется, работает :

$(document).ready(function()
{
    $("#flipper").click(function()
    {
        $("#Front").css("z-index", $("#Front").css("z-index") == "79" ? "81" : "79"); 
    });
});

Однако, если вы просто пытаетесь переключаться между изображениями, было бы лучше переключать их видимость , а не их z-индексы:

#flipper #Back 
{
    display: none;
}

$(document).ready(function()
{
    $("#flipper").click(function()
    {                     
        $("#Front").toggle();
        $("#Back").toggle();
    });
});

Answer 2

способ, которым я исправил это было своего рода обходным путем, который мне действительно не нравился, но это был единственный способ, который я мог найти ..

, так как у меня есть 2 div для каждой стороны, я просто отображаю:не задним, так что даже если браузер ошибочно решит отобразить его, он не будет!