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，它似乎正在工作：

$(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，所以我只需“显示：无”-ed 背面一个，因此，即使浏览器错误地决定显示它，它也不会！