IE6+floatで白髪がふえるほど悩んだ件

IE6で、以下のような場合に、あまり出会わないレイアウト崩れが起きたという話。

  • よくある3ペインレイアウト(ヘッダ、右メインカラム(float: right) 左サイドバー(float:right)という順番)
  • メインカラムの最後に、LI を float: left; して配置している
  • そのLI < UL の前に、別のUL > LIがある
  • jQueryを使って、DOM構築後にその LI に対して padding-bottomを増量、background-imageを設定する

すると、DOM構築後~レンダリング後にjQueryがpadding-bottomを増量、当然それ以後にある要素が増量分ずれることになる。が、floatしたLIはなぜかその増量分×2下がり、さらにLI中のDIVがどこかへ消滅する(実際にはウィンドウ?の左端にあるらしい。中身見えない)という事態になった。

結局、あらかじめpadding-bottomを設定し(ちなみに li:last-child が効いたのはびっくり)、ULにwidthを設定して、消極的解決をみた。

Leave a Reply