0

私たちのプロジェクトの 1 つで、すべての主要なブラウザー (Firefox 22.0、Chrome 28.0.1500.72 m、IE 10.0.9200.16521) で次の奇妙な計算に気付きました。

次の HTML コードを考慮してください。

<div>
    <div style="height:100px">Head</div>
    <div style="height:200px">
        <p style="margin:10px">This goes wrong</p>
        Wrong wrong wrong
    </div>
</div>
<div>
    <div style="height:100px">Head</div>
    <div style="height:200px">
        Right right right
        <p style="margin:10px">This goes right</p>
        Right right right
    </div>
</div>

コード例は、http: //jsfiddle.net/Cnjdg/でも見つけることができます。

2 つのトップレベル DIV の計算された高さを調べると、奇妙なことに気付くでしょう: DIV1 の高さは 310px で、DIV2 の高さは 300px です...ロジックは、DIV がその子と同じ高さであることを教えてくれます (特に、特別なスタイリングがないため)適用されている)私にとっては、両方の DIV 要素が 300px の高さを返す必要があることを意味します。

そのため、子の最上部に上マージンを持つ要素がある場合、親の高さを計算するときにこの高さが考慮されているようです。これはバグですか？これは意図したものですか？何の目的で？

4

2 に答える 2

0

最後に、少し時間があり、davidgnin の返信に触発されて、W3C ボックスモデルの定義をさらに掘り下げて調べました。これは間違いなく私の質問に答えますこれはバグですか? これは意図されたものですか? 答えはNOとYESです

ここで説明されている理由を見つけることができます。ここでは、次のことが明確に述べられています。

要素に上部境界線、上部パディングがなく、子にクリアランスがない場合、インフロー ブロック要素の上マージンは、最初のインフロー ブロック レベルの子の上マージンで折りたたまれます。

なぜこれが行われるのかについての理由は、私には少し不明確です（したがって、この背後にある理由を説明できる人なら誰でも歓迎します）。そのため、どのような目的で？

幸いなことに、これが発生する理由を知っていれば、その影響に対抗することもできます。

  1. たとえば、次を使用して、新しいブロック書式設定コンテキストを確立しますoverflow:hidden
  2. 親と子をパディング、ボーダー、インライン要素、またはクリアランスで区切る

これが誰かが同じ状況に陥るのに役立つことを願っています。

于 2014-01-31T12:12:07.797 に答える