よく忘れてしまうのでメモ。
FireFoxにおいて、背景色がコンテンツ内容に合わせて伸びてくれない現象がよく出る。
以前対応したのに、また忘れてしまったのでメモ。
<div class=”contents”>
<div style=”float:left”>
画像やなんでもコンテンツてんこもり
</div>
</div>
なんてのがあって、contentsのcssを
.contents {
background: #000000;
}
なんつって背景を黒に塗りつぶすはずが、FireFoxで見ると「黒塗られてねーじゃん！」ってなることがよくある。
どうやら、contents内のデータにfloat:leftなどの指定が入ってると、このような現象になる。
つーわけで解決法。
<div style=”clear:both”></div>空タグを入れろ！
悲しいかな、ドキュメントとビューを切り離すはずが、ビューのデータがHTMLに書き込む必要があるなんて・・・
赤字を追加です。
<div class=”contents”>
<div style=”float:left”>
画像やなんでもコンテンツてんこもり
</div>
<div style=”clear:both”></div>
</div>
当然、こんなんダサダサなので、style=”clear:both”をCSSに.clear { clear:both; }って書いて<div class=”clear”></div>にしましょう。まぁこれでもダサいんだが・・・
Loading ...
