久しぶりにバグに遭遇

えっと、イロイロすべきことがあるんですが、バイトもあるんですよね…

それで、{ position: absolute; } を使って IE で困ったので、書いておこうかと。

まず、今回はHTMLの構造にも以下のような要望（指定）がありました。

• [logo]
• [content]
• [navigation(main)]
• [navigation(sub, etc.)]
• [footer]

元々 [navigation(sub, etc.)] は上部にレイアウトするデザインだったので、ロゴの直下に持ってきていて、個人的に「表示上、上に来るものは先に書けばいい」という方針なのですが、構造的にも SEO 的にもこの方がベターと言われたので、コレで。

で、結局チョットアレンジして以下のようにしていました。

• [logo]
• [skipper]
• [content]
• [navigations
  • [navigation(main)]
  • [navigation(sub, etc)]
  ]
• [footer]

ここで、[ ] はブロックレベル要素で、中は id 名のようなモノ。 [skipper] はコンテンツとナビへ移動するもの（ページ内リンク？）で、{ display: none; } を適用。（後で { visibility: hidden; } or { text-indent: ***; }, etc. に変えるかも ）

取り敢えず、この状態のHTMLで、以下のようなレイアウトを再現。

再現できたことは出来たんですが、まず Mac-IE で問題発生です。

#nav(sub, etc.) を { position: absolute; } で配置したわけですが、{ position: relative; } を指定した #wrapper ではなく、#nav(main), #nav(sub, etc.) を覆う div 要素を基準としてしまい、Mac-IE ではヘッダ部分のレイアウトがうまくいきませんでした。

仕方が無いので、以下のように HTML を変更して解決。

• [logo]
• [skipper]
• [content]
• [navigation(main)]
• [navigation(sub, etc.)]
• [footer]

まぁ、予想通りというかなんと言うか、ココまではいいんですよ。

問題はここからで、Win-IE で #nav(sub, etc.) が消滅しました。何処にもレンダリングされないんですよ。

原因はよく分かりませんが、{ float: ***; } を指定したボックスの直後のボックスに { position: absolute; } を指定すると起こるらしい。

[navigation(sub, etc.)] の中身を「この要素を表す適当なタグは無いから div にしてしまえ」と、やや強引な div 中毒気味なソースから、「リンクリスト」という解釈に変えた時点から発生し、元に戻しても直らなかったので、起こるかどうかは不定なバグらしい。

で、「どうやって解決したか」ですが、あまりスマートとは言えない方法で、改行タグを入れて解決しました。

直後のボックスに { position: absolute; } を指定しなければ良いようなので、直後に何かテキトウに要素を置けば解決します。構造的に何を置いても見えなくなるはずなんですが、挙動がおかしくなって困ったので、{ display: none; } を指定したんですが、直後の要素が無いことになってしまってダメで、{ visibility: hidden; } だとやはりレンダリングがおかしくなってダメ。

と言うわけで、<br /> を入れて解決に至る。

最終的なソースは以下のようになりました。

• [logo]
• [skipper]
• [content]
• [navigation(main)]
• <br />
• [navigation(sub, etc.)]
• [footer]

取り敢えず、一件落着。

ちなみに、私は { position: absolute; } な指定でレイアウトするのは「トリッキー」ってことにしていますが、どうなんでしょうね。まぁ、個人的にあまり使わないようにしています。

まぁ、こんな感じでほぼ全ての Web ブラウザで同じ見栄えですね。

個人的には、[navigation(sub, etc.)] はヘッダとしてロゴとまとめておきたかったんですけどね… っていうか、元々そうしていたんですが、後で要望があって修正になりました。実際、SEO 的な効果はどうなんでしょうね。私は、ほぼ無いに等しいと思っていますが。