jquery - z-index 在 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-index 和它 seems to be working :

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

但是，如果您只是想在图像之间切换，最好是 toggle their visibility而不是他们的 z 索引:

#flipper #Back 
{
    display: none;
}

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