IE6で次の要素のmarginに影響をうけるバグ

Posted 2010年1月27日 | Auther dada | Category PC・デジタル | Tag タグ: , ,
Twitterにツイートする Facebookでシェアする はてなブックマーク

ちょっとハマったのでメモしておきます。

上記画像のように、ヘッダ部分にコンテンツ部分が食い込むようなレイアウトを作ろうとしたところ、IE6だけ下の要素の影響を受けるという不可思議な現象が起きました(IE7、8は問題なし)。

htmlとcssはこんな感じ。

<div id="box1">
	<div id="box1-inner">BOX 1</div>
</div>

<div id="box2">BOX 2</div>
#box1{
	width:		100%;
	position:	absolute;
}

#box1-inner{
	width:		400px;
	margin:		auto;
	border:		solid 4px red;
}

#box2{
	width:		200px;
	height:		300px;
	margin:		auto;
	border:		solid 4px blue;
}

いろいろ試しててわかったのは、

  • 「#box2」の「margin:auto」を削除するとFFもIEも一致する
  • 「#box1」の「position:absoulte」を削除するとFFもIEも一致する

「margin:auto」と「position:absolute」の組み合わせで発生するようです。
他にも条件はあるかもしれませんが。

「position:absolute」が次の要素の「margin」の影響を受けるのなら、間に別の要素を挟んでしまえばよいと思い立ち、下記のようにしてみました。

<div id="box1">
	<div id="box1-inner">BOX 1</div>
</div>

<!-- 空のDIVを挟む -->
<div id="box2">BOX 2</div>

釈然としないものがありますが、とりあえずこれで解決しました。(´ワ`)

現場のプロから学ぶXHTML+CSS 現場のプロから学ぶXHTML+CSS
CSS Nite

毎日コミュニケーションズ 2008-11-11
売り上げランキング : 2534
おすすめ平均

Amazonで詳しく見る by G-Tools

関連する記事

No Comments »

No comments yet.

Leave a comment

カテゴリー