忍者ブログ

World of granshe.

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。
[137] [136] [135] [134] [133] [132] [131] [130] [129] [128] [127

[PR]

×

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

IEでmargin-bottomがfloatした要素にも適用されるバグ

先日制作作業をしていたら出くわしたバグについてのメモ。

ボックスの中に、margin-bottomを指定した要素を配置していて、
その後続の要素がすべてフロートしていた場合、
margin-bottomがフロートしているボックスの下にmargin-bottomが発生し、
フロートボックス群と親ボックスの間にmarginができるというものです。


発生環境

  • IE5.5
  • IE6
  • IE7

発生条件

  • あるボックス内で、1つの要素(Aとする)以外がすべてフロートしている。
  • 要素Aはフロートボックスよりも前に記述されている。
  • 要素Aにmargin-bottomが指定されている。
  • 要素Aの親ボックスに高さを指定しているか、
    displayをinlineやinline-blockにしている

以上の条件を満たすと、
要素Aに指定したmargin-bottomが、フロートしたボックスにも適用されてしまいます。
例を見る。

おそらく上記ページをIE7以下で見ると表示がおかしくなるのではないでしょうか。


フロートボックスにmargin-bottomが適用されないというバグは以前ご紹介しましたね。

どうしてもこの条件で余白を明けたい場合はpadding-bottomを使うしかなさそうです。
私の場合はpadding-bottomで解決できたのでよかったですが。


今まで出くわしたことのなかったバグだったのでIE標準モードだけでのことかと思ったのですが、
xml宣言をつけた互換モードでも同じバグが確認できました。

きちんと覚えておかねば!

PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
この記事にトラックバックする:
プロフィール
名前: ゆーり
職業: コーダー(模索中
趣味: Web制作
自己紹介: 某Web製作会社の入社5年目のマークアップエンジニア。専門はHTMLとCSSとMT(自称)。
カレンダー
09« 2017/10 »11
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]