div+cssの概要 FF..._html/css_WEB-ITnoseにdivが設定されていない

お気に入り、ありがとうございます

元アドレス: div+css の概要?高さの背景色を設定していない div または外枠が FF で表示されない場合の解決策 著者: Tianya Haijiao

Web で div+css を使用する場合ページ レイアウト (場合) 外部 div には高さを設定せずに背景色または境界線があり、IE ブラウザーでは通常どおり表示されます。ただし、Firefox/operaで閲覧すると、一番外側のDivの背景色や枠線が機能しないという問題があります。

一般構造

css ファイル: (CSS コードの最も重要な部分のみが記述されています。これは、最も外側の div の背景色と境界線を定義し、内側の div がフローティングであることも定義します)
.outer{border: #F00 1pxソリッド;背景:#FF9repeat;}
.inner1,.inner2{float:left;}
図1のようにIEでは正常に表示されます

(図1)
FF、境界線、背景色で異常に表示されます図 2 に示すように、どれも正常に表示できません

(図 2)

インターネット上の情報を調べた結果、この問題については大体理解できました。

理由分析: Firefox と Opera では、内部の DIV がフローティング (float) であり、親ボディは子ボディのフロート後の高さを計算しないためです。この種の計算は IE でサポートされているため、IE では正常に動作します。

したがって、この問題には 2 つの前提条件があります: 1. 外側の div には高さが設定されていません; 2. 内側の div は (float 属性で) フローティングです。

解決策:
外側の div の高さを直接設定します (推奨されません)。多くの場合、外側の div の高さがわからないため、内側の div に依存して、それに応じて外側の div を自動的に拡張したいと考えています。外側の div の高さは当てはまらないため、この方法はお勧めできません。
方法 1:
各内部 div の後にクリアな float を追加します (推奨)。これにより、Firefox と Opera はそれを float として扱い、内部 div の高さを自動的に計算します

< ; div class="inner1">

< ;/div>
方法 2:
.outer に overflow: hidden; を追加します (この方法は特に理解していませんが、テスト後、この問題も解決できます)
overflow 属性は、コンテンツが次の場合に発生することを規定します要素ボックスの内容がオーバーフローします。外層の高さが設定されており、その高さが内層が占める実際の高さよりも小さい場合、内層のコンテンツの一部が非表示になります。