レンダリングの違いは3.0〜3.5です。 バグまたは機能？

先日、クライアントが私に手紙を書いて、彼らはロゴがサイト上で出航したと言います。 どのブラウザを尋ねますか？ Firefoxは言います。 私はこのようにテストしています-すべては私と一緒に大丈夫です。 多分彼はFire Fox 2.xを持っていると思いますが、そうではありません-3.0があります。 私がインストールした3.5はあまり新しくありません。



そのため、Firefox 3.5および3.0で「floating」divのフロートとそれに続く相対的な配置のさまざまなレンダリングの奇妙な現象が発見されました。 下の写真で違いを確認できます。 1つのコード、結果は異なります。











@nzwebdevからの依頼で、この効果を示すテストページを作成しました。 以下は、ソースを見ることができない人のための説明です。



このページは、次のように説明されている2つの同一のコンテナで構成されています。 境界線と背景色の存在は、バゴフィチの外観に影響しません。



.content {

background-color: #eee;

border: solid 1px #ccc;

margin-bottom: 5em;

/* padding >= 3em */

/* padding: 3em; */

}







各コンテナには、テキストと次のコンテナが含まれます。



div.logo_and_caption {

background-color: #ccc;

border: solid 1px #ddd;

float: right;

position: relative;

top: -1.5em;

}







2番目のdivはフローティングです。 右に移動する必要があり、テキストは左に流れる必要があると想定されます。 フローティングdivがテキストの後に配置されると、ブラウザーは異なる結果をもたらすことが判明しました。 2番目のコンテナーでは、logo_and_captionクラスを持つdivは、図でわかるように、その場所に残ります。



興味深いことに、外部コンテナにパディングを追加すると問題が解決します。



これがページ上のオブジェクトの魔法の動きとの戦いで誰かを助けることを願っています。 ありがとう