3

中央の div と他の 4 つの div があります。中央の div の両側に 1 つずつあります。ボタンをクリックすると、各 div がフレームにスライドし、中央の div が押し出されます。

chrome では問題なく動作しますが、firefox を使用すると失敗し、firebug によるエラーは発生しません。

これは、現在Firefoxで正しく機能しない私の実装です。

ご覧のとおり、Firefox では、中央の div が画面からスライドするのではなく、単純に消えます。クロムを使用すると、中央の div が意図したとおりにスライドします。

誰かが firebug を見て、問題の原因と思われるものを教えてもらえますか?

このコードは、chrome または firefox を使用して正常に動作する jsfiddle に基づいています。

jsfiddle のコードは次のとおりです。

ここにhtmlがあります

<div id="fullContainer">
    <div id="right">

    </div>
    <div id="left">

    </div>
    <div id="top">

    </div>
    <div id="bottom">

    </div>
</div>
<div id="centerContainer">
    <div id="relativeContainer">
        <div id="content">
            This is where your face should go.  Notice that I placed it within a centering div.  
            This will enable the face to be absolutely positioned, and allow for you to modify 
            it's position when the side-bars slide in.
            <div data-move="left">Open Left</div>
            <div data-move="right">Open Right</div>
            <div data-move="top">Open Top</div>
            <div data-move="bottom">Open Bottom</div>
        </div>
    </div>
</div>

ここにCSSがあります

#centerContainer {
    position:fixed;
    top:50%;
    left:50%;
    width:0;
    height:0;
}
#relativeContainer {
    position:relative;
}
#fullContainer {
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
}
#content {
    position:absolute;
    width:300px;
    height:400px;
    top:-200px;
    left:-150px;
    background:#BADA55;
    border:1px solid #444;
    padding:10px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#content.right {
    left:-250px;
}
#content.left {
    left:-50px;
}
#content.bottom {
    top:-300px;
}
#content.top {
    top:-100px;
}

#content div {
    cursor:pointer;
    color:blue;
    text-decoration:underline;
    margin-top:15px;
    text-align:center;
}
#left {
    position:absolute;
    top:0;
    left:-125px;
    height:100%;
    width:100px;
    background:blue;
    border:1px solid #444;
    padding:10px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#left.opened {
    left:0;
}

#right {
    position:absolute;
    top:0;
    right:-125px;
    height:100%;
    width:100px;
    background:green;
    border:1px solid #444;
    padding:10px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#right.opened {
    right:0;
}

#top {
    position:absolute;
    left:0;
    top:-125px;
    width:100%;
    height:100px;
    background:yellow;
    border:1px solid #444;
    padding:10px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#top.opened {
    top:0;
}

#bottom {
    position:absolute;
    left:0;
    bottom:-125px;
    width:100%;
    height:100px;
    background:red;
    border:1px solid #444;
    padding:10px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#bottom.opened {
    bottom:0;
}

ここにJavaScriptがあります：

function SlideOut(element){

    $(".opened").removeClass("opened");
    $("#"+element).addClass("opened");
    $("#content").removeClass().addClass(element);

}
$("#content div").click(function(){

    var move = $(this).attr('data-move');

    SlideOut(move);

});

ここにフィドルがあります

ありがとうございました

ケイティ

4

1 に答える 1

0

私はいくつかのテストを行い、何が起こっているのかを見つけました。これは、説明とデモンストレーションの目的で、このフィドルで再現されています。

Firefox で CSS 属性を移行する場合left、開始元の初期値が必要です。そうでない場合は遷移せず、属性に値を割り当てるだけです。

Chrome では、初期値が設定されていない場合、明らかにそれがどこからでも開始され、心配する必要はありません。

上記のフィドルを Firefox でチェックアウトして最初の行をクリックすると、2 行目が遷移している間、さらに先に表示されます。唯一の違いは、2 行目にleft: 0初期設定があることです。Chrome では、どちらも同じように動作します。

left: 0を上に置くと#content div、Firefox のようにスライドします。（Firebugでテストされ、修正されます）。

于 2012-10-29T20:10:13.273 に答える