Internet Explorer-フローティングDiv間のスペース

Question

Internet Explorerでプレゼンテーションの問題が発生しています。次の簡単なコードブロックは、Safari、FireFox、Chrome、Operaで期待どおりにレンダリングされます。ただし、IE6とIE7の両方で、左右の浮動DIV要素の間に顕著なスペースが生じます。

私の質問は：IEと私が言及した他のブラウザーの両方で同じCSSが動作するようにフロートを達成するための、より正しい方法はありますか？そうでない場合、Internet Explorerのスペースを取り除くための最良の方法は何ですか？

ありがとう、マット

<style>
.left {
    width:100px;
    float:left;
    border: solid black 1px;
}

.right {
    width: 100px;
    margin-left:100 px;
    border: solid red 1px;
}
</style>

<div class="left">
    a
</div>
<div class="right">
    b
</div>

これはコミュニティWikiであるため。プランBが以下に提案するソリューションを使用して作業コードを投稿すると思いました。

<style>
        .left {
        width:100px;
        border: solid black 1px;
        float:left;
    }

    .right {
        width:100px;
        border: solid red 1px;
        float:left;
    }
    .clear {
        clear:both;
    }
</style>

<div class="left">
    a
</div>
<div class="right">
    b
</div>
<div class="clear"></div>
c

Answer 1

それらを両方とも左にフロートし、両方のdivの後に以下を追加します。

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

 .clear { clear: both; }

それか、マージンの代わりにパディングを使用します。

Answer 2

.body {
    padding:0px;
    margin:0px;
}

Answer 3

これは、二重マージンフロートのバグです。ここで詳しく説明してください：

http://www.positioniseverything.net/explorer/doubled-margin.html

Answer 4

フローティングdivにdisplay: inlineを追加してみてください。これは、浮動要素にマージンを追加するIEのバグだと思います。ディスプレイ：過去にインラインが機能していました。これがお役に立てば幸いです。