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

Answer 2

我解决这个问题的方式是一种解决方法，我真的不喜欢，但这是我能找到的唯一方法..

因为我每边都有2个div，所以我只是'显示：没有'后面的一个，所以即使浏览器错误地决定显示它，它也不会！

z-index在firefox中表现不同

2 个答案: