Firefox のマージントップが失敗する理由と解決策

なぜこの説明を翻訳する必要があるのでしょうか? css2 を翻訳した人がいますが、実際に見てみると非常に荒いです (私だけがそう言っているわけではありません。翻訳者は本当に素晴らしいです!) 最近、css に触れることが多くなりました。 xhtml ですが、数が増えれば増えるほど混乱が生じます。
今、私は、多くの問題は決して問題とは言えないと感じています。例えば、牛のナイフで鶏を殺すことは不可能ではありませんが、根本的な原因が間違っている場合、その見た目は不合理です。問題を表面から解決する場合、常に混乱するのは避けられません。先ほども言いましたが、現実的であり、衝動的になってはなりません。
この説明では、「マージンの縮小」とは、2 つ以上のボックス モデル間の隣接するマージン属性 (関係は隣接またはネストすることができます) (それらの間に空でないコンテンツがあってはなりません)、パディング領域、境界線、または明確な分離方法の使用を意味します。 ) を組み合わせて 1 つのマージンとして表します。
CSS2.1では横余白は潰れません。
一部のボックス モデルでは垂直マージンが折りたたまれる場合があります:
1. 通常のドキュメント フローでは、2 つ以上のブロック レベルのボックス モデルの隣接する垂直マージンが折りたたまれます。
最終的なマージン値の計算方法は次のとおりです:
a. すべてが正の値である場合は、最大値を取得します。
b. すべてが正の値ではない場合は、その正の値から最大値を減算します。 ;
c. 正の値がない場合は、絶対値を取得し、0 から最大値を減算します。
注: 隣接するボックス モデルは DOM 要素から動的に生成される場合があり、隣接関係や継承関係はありません。
2. 隣接する と モデルで、どちらかがフローティングされている場合、フローティング ボックス モデルとその子要素の間であっても、垂直方向のマージンは折りたたまれません。
3. オーバーフロー属性が設定された要素とその子要素の間のマージンは折り返されません（オーバーフロー値が表示されている場合を除く）。
4. 絶対配置 (position:absolute) が設定されているボックス モデルの場合、子要素間であっても垂直方向のマージンは折りたたまれません。
5. display:inline-block が設定されている要素の場合、子要素であっても垂直方向のマージンは折りたたまれません。
6. ボックスモデルの上下のマージンが隣接している場合、マージンが崩れる可能性があります。この場合、要素の位置は、隣接する要素のマージンが折りたたまれているかどうかによって決まります。
a. 要素のマージンとその親要素のマージントップが一緒に折りたたまれている場合、ボックスモデルのボーダートップの境界定義はその親要素の境界定義と同じになります。
b. さらに、どの要素の親要素もマージンの折り畳みに参加しないか、親要素のマージンボトムのみが計算に参加します。要素のボーダートップがゼロ以外の場合、要素のボーダートップの位置は以前と同じです。
クリア操作が適用された要素のマージントップは、そのブロックレベルの親要素のマージンボトムと折り畳まれることはありません。
折り目で覆われた要素の位置は、折り畳まれた他の要素の位置に影響を与えないことに注意してください。境界線の上端の位置は、これらの要素の子要素をレイアウトする場合にのみ必要です。
7. ルート要素の垂直マージンは折りたたまれません。
浮動ブロックレベル要素のマージンボトムは、その兄弟要素がクリアオペレーション。
フローティング ブロック レベル要素のマージン トップは、その最初のフローティング ブロック レベルの子 (フローティングされた最初のインフロー ブロック レベルの子) のマージン トップに隣接しています (要素にボーダー トップがない場合、パディングはありません) - 最上位要素と子要素はクリアされません)。
フローティング ブロック レベル要素の margin-bottom が次の条件を満たす場合、その要素は最後のフローティング ブロック レベル子要素の margin-bottom に隣接します (要素が padding-bottom または border を指定していない場合)。
a. Height:auto を指定します
b、min-height は要素の実際の高さ (height) より小さい
c、max-height は要素の実際の高さ (height) より大きい
min-height 属性の場合要素の が 0 に設定されている場合、その所有マージンは隣接しており、border-top と border-bottom も、padding-top と padding-bottom もありません。その高さ属性は 0 または auto にすることができ、含めることはできません。インライン ボックス モデル (ライン ボックス) では、そのすべての浮動子要素 (存在する場合) のマージンも隣接しています。
要素が所有するマージンが折りたたまれ、クリア操作を使用すると、そのマージントップはすぐ後の兄弟要素の隣接するマージンと一緒に折りたたまれますが、その結果、そのマージンはブロックレベルと一致しません。親要素の margin-bottom が折りたたまれています。
折り畳む操作は、padding、margin、border の値に基づいて行われます (つまり、ブラウザがこれらすべての値を解析した後)。折り畳まれたマージンの計算により、使用されているさまざまなマージン値が上書きされます。

<div id="d0" style="background-color:#333333;height:500px;"> 
<br style="line-height:0;"/> 
//不加入br这一行，在FIREFOX中id1的margin-top:20px将会在d0上作用，使d0上方与body间有20px的间距,d1与d0的上方没有间距，而IE内正常显示 
<div id="d1" style="background-color:#000000;margin-top:20px;height:100px;"></div> 
<div id="d2" style="background-color:#000000;margin-top:20px;height:100px;"></div> 
</div>

Firefox のマージントップ障害の原因と解決策に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。