今日はポータルサイトのコーディングをしていたのですが、大変面白いバグに遭遇したのでメモしておきます。

ごく普通にdivタグの中に画像を配置したのですが、IE6で見ると外に飛び出しているのです。
悪名高きIE6です。

IE6のゴースト現象で有名なものはテキストが複製されてしまうと言うもの。
これも以前遭遇した事がありました。
この対処法で一番楽なものは、HTMLタグの中に書き込んだコメントタグを削除する方法。
コメントタグは後からのHTML修正時等に大変便利なもので本来は削除したくなかったのですが、他に対処法が見つからなかったのと自社媒体だったという事で、この時はやむなくこの方法をとりました。
ゴースト現象には背景画像が複製されてしまうという事もあるそうです。

今回遭遇したバグは複製ではなく、あるべき所から外れて離れたところへ飛び出してしまう現象でした。
それもテキストではなく画像です。

いつものように軽くググって見ましたが、探し方が悪かったのかピンポイントな情報が見つからず自力解決を決意。
自分の性格がおかしいのでしょうか、この様なバグ遭遇はワクワクしてしまうんですね。・・・忙しくない時だったらの話ですが。
今日は仕事がバタバタの状態デーでしたので、さすがに少しだけイライラ。しかし、イライラしながらもなぜか楽しい!?

まず、テキストゴースト対処法と同じ方法でコメントタグ全削除。見事に解決!

・・・ですが、今回も自社媒体とは言え、この後にプログラマーさんへ渡すのでコメントタグは必須です。なので、この方法は却下!

この後、CSS側でのコーディング方法の変更やらスッタモンダ、時計を見れば3時間近くが経過。

結果、divの閉じタグの直前に、ブランクタグ、もしくは空のコメントタグを入れてやることで飛び出しがなくなるようです。ブランクタグはあまりに意味が無いので、今回は空のコメントタグ採用!

後からググって分かったのですが、前述のテキストゴーストもこの方法で解決できる場合も・・・あるらしいです。これもケースバイケースらしいのですが、根本的な解決法でもなさそうですね。

どうにも厄介なIE6ですが、解決した時の爽快感はAha体験とでも言うのでしょうか?
密度の濃いお仕事デーではありましたが、肝心な制作は押し押しになってしまいました。

とりあえず、こんな事もあるよとメモ!