ちょっとハマったのでメモしておきます。
上記画像のように、ヘッダ部分にコンテンツ部分が食い込むようなレイアウトを作ろうとしたところ、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; }
いろいろ試しててわかったのは、
「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 CSS Nite 毎日コミュニケーションズ 2008-11-11 |
No comments yet.