2

IE7 では Firefox では発生しない奇妙な動作に気付きました。「testing 2」の「div」で、この div の下部に 2 つの改行を追加すると、この div に設定されたマージンが考慮されず、「test 3」の div がそのすぐ下にマージンなしで表示されます。「br」を削除すると、「test 2」と「test 3」の div の間にマージンができます。

これは IE7 のバグですか、それとも回避策はありますか?

    <div style="border: dotted 1px red;">

    <div id="main" style="border: solid 1px black; padding: 10px; margin: 5px; float:left ">
    testing 1


       <div style="border: solid 1px black; padding: 10px; margin: 10px;">
             testing 2
             <br><br>       <!--   THIS LINE -->
         </div>


        <div style="border: solid 1px black; padding: 10px; margin: 10px; ">

        testing 3
        </div>


    </div>

    <div style="border: solid 1px black; padding: 10px; margin: 20px; float: left">

        testing 4
    </div>

    <div style="clear:both"></div>

    </div>

<\html><\body>
4

5 に答える 5

1

IE7 には、ネストされた要素とそのマージンに関する問題があります。

「testing 2」divにレイアウトを強制することで、これを修正できます。

この場合、height:100%;「testing 2」divを設定すると、マージンが元に戻ります。修正を示すために、実際の例を作成しました。

IE CSS のバグのかなりの部分は、要素からレイアウトを強制または削除することで解決できることに注意してください。

于 2009-02-13T09:15:56.340 に答える
1

IE がこれを行っている理由はわかりませんが、適切な解決策の 1 つは、次のように、「testing 2」div の内容を別の div でラップすることです。

<div style="border: solid 1px black; padding: 10px; margin: 10px;">
    <div>
        testing 2
        <br/>
        <br/>
        <!--   THIS LINE -->
    </div>
</div>

ただし、できれば <br/> を使用しないことをお勧めします。可能であれば、CSS を使用してすべてを並べ替えてください。:)

于 2009-02-04T11:14:01.543 に答える
0

を使用する代わりに、div でルールの後に<br>使用します。padding-bottom padding

于 2009-02-09T21:53:10.837 に答える
0

<p>意味的には、そのテキストを、<blockquote>、またはその他のブロック レベル要素内に配置する必要があります。<div>テキストは、ページ内の分割やセクションを示すために使用することを意図しているため、テキストを に直接配置することは避けてください。

例えば：

<div style="border: 1px solid black; padding: 10px; margin: 10px;">
    <p style="margin: 0 0 10px 0;">testing 2</p>
</div>

これにより、IE7 での問題が解決され、他のブラウザーでもより一貫してレンダリングされます。

于 2009-02-13T02:43:59.747 に答える
0

おそらく最善の解決策ではありませんが、
タグの後に改行しないスペースを追加すると役立ちます:

 <br><br>       <!--   THIS LINE -->

の中へ：

 <br><br>&nbsp;       <!--   THIS LINE -->

…って、なぜか通じません…改行禁止スペースは「 」です。(引用符と間にスペースを入れずに)

于 2009-02-04T11:13:51.967 に答える