忍者ブログ

World of granshe.

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。
[110] [109] [108] [107] [106] [105] [104] [103] [102] [101] [100

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

floatとmargin-bottomのカンケイ

本日は超個人的CSSメモです。

今日、バイト先で作ったサイトの修正をしていたんですが、
どうも、IE6とIE7で、margin-bottomが適用されていないのを発見。
(SafariとかOperaでは全く確認しなかったので、IE特有のものかはナゾ。IE8だとOKだった。)


状況としては、

  • floatしてるボックスに、margin-bottomを指定していた。
  • floatしてるボックスの親ボックスに対して、position: relative;を指定した。
  • floatしてるボックスの中に、position: absolute; bottom: 0; right: 0; というスタイルを持ったボックスを入れた。

ら、絶対配置したボックスが、floatボックスの一番下のコンテンツにまるかぶりだった。


とりあえず、初めは何が原因なのか分からなくて発狂しました。
最終奥義CSSハックを使おうかとも思いましたが、
原因が分からないのは気持ち悪くて嫌だったので1時間くらい残業して作業をしてたら見事判明。

Firefoxではmargin-bottomが適用されていて、
そのマージンがきちんと空いて、その下に絶対配置ボックスが配置されていて良かったのですが、
IE6、7では全然マージンがきいてなかったんです。


というわけで、floatボックスのmargin-bottomを消し、
floatボックスの親にpadding-bottomを指定してみごと解決できました。

よかった。


原因はあってるかわからないけれど、
これからfloatボックスにmargin-bottomは指定しないことにします。


メモ終わり。

PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
この記事にトラックバックする:
プロフィール
名前: ゆーり
職業: コーダー(模索中
趣味: Web制作
自己紹介: 某Web製作会社の入社5年目のマークアップエンジニア。専門はHTMLとCSSとMT(自称)。
カレンダー
04« 2017/05 »06
S M T W T F S
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
ブログ内検索
忍者ブログ [PR]