div 背景または可変高さの背景画像が表示されない問題_html/css

div 背景または可変高さの背景画像が表示されない問題_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:42:27

オリジナル

1325 人が閲覧しました

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

一般構造

<style>.a1 {width:100px;background:red;}.b1 {background:blue;width:50px;height:600px;}</style></head><body><div class="a1">    <div class="b1"></div></div>    </body>

ログイン後にコピー

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

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

一般に、外側の div の高さは不明なので、float をクリアします。

div 内の背景色や画像が成長後にそれに応じてどのように成長するかを理解してください。

うわー

1. Div の最後にコードを追加します:

または

2. after 疑似クラスを使用する

このメソッドは、親コンテナーで after 疑似クラスとコンテンツ宣言を使用して、指定された現在のコンテンツの末尾に新しいコンテンツを追加します。一般的なアプローチは、小さくて目立ちにくいため、「ドット」を追加することです。次に、それを使用してフロートをクリアし (フロート要素を閉じ)、コンテンツを非表示にします。

このメソッドには一般的な互換性がありますが、さまざまなハックの後、さまざまなブラウザーに対応でき、同時に HTML を比較的きれいに保つことができるため、今でもより頻繁に使用されています。コードは次のとおりです

3. オーバーフローを非表示または自動に設定する

この方法は、標準準拠のブラウザでフローティング要素を閉じるために、親コンテナのオーバーフローを非表示または自動に設定する方法です

ただし、オーバーフローを使用すると、オーバーフローが発生する可能性があります。ページのパフォーマンスに影響を与えるには、その影響が不確実であるため、複数のブラウザでページをテストすることをお勧めします

4. 外部要素をフロート、フロートインフロートします

このアプローチは、親コンテナもフローティングにすることです。これは浮動要素の特性を利用しており、浮動要素は浮動要素を閉じます。この方法は IE/Win および標準互換ブラウザでは良好な結果をもたらしますが、欠点も明らかです。結局のところ、フローティングは特殊な動作であり、レイアウトがフローティングにならない場合があります。浮かせるのも正常です。