久しぶりに時間が出来たので、更新を頑張るためにCSSに関するTIPSを。

最も多くのユーザが使うIE6。CSSレイアウトでコーディングを行っている際、時々ぶちあたるバグを紹介。

floatを多用しているCSSレイアウトのコーディングを行っていると、Windows IE6で下のイメージの様な、テキストの後半が複製され予期しない所にはみ出る事があります。
和柄はフッタのイメージ、コピーライトがテキストです。形として、全体をラップしたボックス内にfloatされたfooterボックスを入れ、さらにコピーライトを配置するボックスを入れ子にしている様な構造です。

これは、きちきちのボックスの入れ子を行っている際出現するIE6のバグでして、ソースを見ても余分な文字は無いし、本来あるべき箇所のテキストを選択するとはみ出た所も選択されるという不思議な現象です。

私も制作の際この問題にぶちあたり、頭を悩ませました。
IEのバグなので、CSSの記述がおかしい訳でなく、なかなか原因が分からないからです。
取りあえず原因となりそうなボックスをソースから削除したりしてもだめで、検索しようにも現象となるキーワードが曖昧なため、WEBでも簡単に解決の手がかりが見つかりません。
「IE6」、「CSS」、「テキスト」、「はみ出す」ではヒットせず、これに「余分に」や「突然」みたいなキーワードを加えると、 何がなんやら分からなくなってしまいます。

で、解決方法としては、ソースからコメントを削除する事です。
色々試しましたが、ソース全てのコメントを削除する必要は無いみたいです。でも、 テキストを内包している、ボックスまわりのコメント削除だけでは解決しない場合もあり、 影響範囲がどの程度かはよく分かりません。
でも、とにかくコメントを削除すると、何事も無かったかの様に余分なテキストが無くなります。

まぁ、正直な話この件を深く検証する気はあまりないですが、同じ問題にあたった人の解決に役立てば幸いです。