jquery - 複数のli ie7上のcss / jQueryオーバーレイdiv

Question

コードは次のとおりです。http://jsfiddle.net/pfaUZ/5/

li をクリックすると、2 つの li が完全にオーバーレイされていることを示す pop div (例: li 幅 100px、pop 幅 200px;) が、ie7 でテストすると機能しない:

見る：

Answer 1

参照: http://jsfiddle.net/thirtydot/pfaUZ/11/

この IE7 のバグは、「アクティブ」liにのみ次のものがあることを確認することで修正できますposition: relative。

$('li').click(function() {
    $('.pop').hide();
    $(this).find('.pop').show();

    $('li').css('position', 'static');
    $(this).css('position', 'relative');
});

.hide()私もとに変更しました.show()。これらのメソッドは、使用していたものと同等です。

より望ましい純粋な CSS 修正があるかもしれませんが、私はそれを見つけることができません。

Answer 2

.popクラスでは、幅を 100 に設定するだけで問題が解決します。

.pop {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    height: 100px;
    width: 100px; /* <-- this one */
    background: #333;
    z-index: 9999;
}

Answer 3

そのようにしてみてください

$('li').click(function() {
    $(this).addClass('active').siblings().removeClass('active');
});

2 つの要素を操作する代わりに、アクティブな CSS を使用します。ここでプレビュー: http://jsfiddle.net/acrashik/pfaUZ/9/