1

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

私の質問は、同じCSSがIEと私が言及した他のブラウザーの両方で機能するようにfloatを実現するためのより正しい方法はありますか？そうでない場合、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>

これはコミュニティウィキなので。プラン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
4

4 に答える 4

6

両方を左にフロートし、両方の div の後に次を追加します。

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

 .clear { clear: both; }

それか、マージンの代わりにパディングを使用してください。

于 2009-01-15T19:16:32.137 に答える
1 
.body {
    padding:0px;
    margin:0px;
}
于 2012-08-20T21:19:08.400 に答える
0

ダブルマージンフロートバグです。ここでよく説明されています：

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

于 2009-01-15T19:09:11.420 に答える
-1

display: inlineフロートdivに追加してみてください。これは、浮動要素にマージンを追加するというIEのバグだと思います。表示：インラインは過去に私のために働いていました。お役に立てれば。

于 2009-01-15T19:07:28.257 に答える