html - IE8 - margin-top: 10px のコンテナにはマージンがありません

Question

編集: これは IE8 でのみ発生し、IE7、Firefox、Opera などで正常に動作します。

まず、私の問題を示すためにフォトショップで作成した写真を次に示します: http://richardknop.com/pict.jpg

今、あなたは私の問題について考えているはずです。以下は、私が使用しているマークアップの簡略版です (ほとんどの無関係なコンテンツは省略しています)。

<div class="left">
    <div class="box">
        // box content
    </div>
    <div class="box">
        // box content
    </div>
    <div class="box">
        // box content
    </div>
</div>
<div class="right">
    <div class="box">
        // box content
    </div>
    <div class="box">
        // box content
    </div>
    <div class="box">
        // box content
    </div>
</div>
<div class="clear"></div>
<div class="box">
    //
    // NOW THIS BOX HAS NO TOP MARGIN
    //
</div>
<div class="box">
    // box content
</div>

CSS スタイルは次のようになります。

.clear {
    clear: both;
}
.left {
    float: left;
}
.right {
    float: right;
}
.box {
    overflow: auto;
    margin-top: 10px;
}

明らかに、境界線、背景色と画像、フォント サイズなどの無関係なスタイルはすべて除外しました。重要なものだけを残しました。

どこに問題があるのでしょうか？

Answer 1

動作するかどうかを確認padding-top: 10pxします。マージンがページの上部から移動しようとしている可能性があります。

Answer 2

これはIE8のバグだと思います。フロートされた左右の div の兄弟要素に関連します。IE8 では、クリア div の有無にかかわらず、フローティングされていない最後の要素の上部マージンが失われます。

これをテストしましたが、IE8 だけが間違っています。

http://www.inventpartners.com/content/ie8_margin_top_bug

また、3つのソリューションを考え出しました。

Answer 3

私はこのアプローチを完全には理解していません。<div>sをクラスrightとleftでラップして別のクラス<div>に適用しoverflow: hidden、width: 100%それに適用して、float要素の下の要素が正しく表示されるようにすることができます。

Answer 4

enter code hereフロートされたdivの周りにoverflow：hiddenのある幅のコンテナーを使用してみて、クリアされたdivを削除します。

    <div id="container">
        <div class="left">    
            <div class="box">        // box content    </div>    
            <div class="box">        // box content    </div>    
            <div class="box">        // box content    </div>
        </div>
        <div class="right">    
            <div class="box">        // box content right    </div>    
            <div class="box">        // box content    </div>    
            <div class="box">        // box content    </div>
        </div>
    </div>
    <div class="box">    //    // NOW THIS BOX HAS NO TOP MARGIN    //</div>
<div class="box">    // box content</div>

そしてCSS

#container { width: 100%; overflow: hidden; }

（申し訳ありませんが、テストのためにIE7を作業用マシンに残したため、確認できません）

Answer 5

私にも同様の問題があり、Matt Bradleyによって提供された解決策は私にはうまくいきませんでした（しかし、とにかくそれを投稿してくれてありがとう！）。h1要素にmargin-top：10pxが必要でした。

私が思いついた解決策は、h1要素にposition：relative、top：10px、margin-top：0pxを追加することでした。

Answer 6

クリア div を閉じてみてください。

<div class="clear"></div>