0

IE8で特定の要素を表示/非表示にするときに問題が発生します。の要素にdisplay:inline-block。の子（ネストされた子を含む）がdisplay:blockある場合、その要素の子は非表示/表示時に問題が発生します。ページは正しく再描画されず、他の要素の位置は、新しく非表示/表示された要素を反映するように変更されません。

問題を示す最小限のマークアップは以下のとおりです。この例では、[クリック可能な要素]をクリックすると、すぐ下の3つのdivが非表示になります。ただし、フッターDivの位置は変更されません。大きなギャップが残ります。ページ上のすべてのテキストを選択するなど、ページの再描画を強制するために何かを行うと、フッターは正しい位置にジャンプします。

要素を表示すると、同様のことが起こります。フッターdivが下にプッシュされる代わりに、新しく表示された要素によってオーバーラップされます。

<div style="display:inline-block">
    <div>
    <!-- Any number of other HTML elements -->
        <div style="display:block">
            <div class = "clickable" >Clickable element.</div>
            <div class = "toggleable">Hideable element 1.</div>
            <div class = "toggleable">Hideable element 2.</div>
            <div class = "toggleable">Hideable element 3.</div>
        </div>
    </div>
</div>

<div>Footer Div</div>

<script type="text/javascript">
    $('.clickable').click(function(){
        $('.toggleable').toggle();
    });
</script>

私はこれをしばらくの間分解しようとしてきましたが、問題が最小限に抑えられていることはほぼ間違いありません（inline-block要素の後に要素が続きblock、子要素に対して表示/非表示を実行します）。誰かが以前にこれに遭遇したことがありますか？またはこれを回避する方法についての提案はありますか？

4

2 に答える 2

3

これでうまくいくはずです。以下の答えが示すように、インラインブロックは古いブラウザではサポートされておらず、IE8の特定のバージョンでは奇妙な動作を示します。しばらく前に行ったことからこの修正を覚えていますが、申し訳ありませんが、なぜこれが発生しているのかについて完全に説明することはできません。とにかく、メインdivにフロートを追加し、フッターをクリアすると、指を交差させれば機能するはずです。

<div style="display:inline-block;float:left">
    <div>
    <!-- Any number of other HTML elements -->
        <div class="div-2" style="display:block">
            <div class = "clickable" >Clickable element.</div>
            <div class = "toggleable">Hideable element 1.</div>
            <div class = "toggleable">Hideable element 2.</div>
            <div class = "toggleable">Hideable element 3.</div>
        </div>
    </div>
</div>

<div style="clear:left">Footer Div</div>
于 2013-02-22T17:48:18.837 に答える
1

ここでは正常に動作しているようです...しかし、IE8にはjqueryのレンダリングに問題があり、cssプロパティ'inline-block'は古いブラウザバージョンでは実際にはサポートされていないことに注意してください（ie7、動作しません、ie8、私はわからない）。「zoom：1;」を追加してみてください。インラインブロックが実行されているタグのcssを修正します。それが何とか役立つことを願っています。

于 2013-02-22T17:25:41.117 に答える