さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【html】IE6でテキストが重複するバグ

Pocket
LINEで送る

htmlコーディングでIE6だけテキストが重複することがたまにあります。
こんな感じで。

20080923-bug

上の例のように「こんにちわ」しか入力していないのに「ちわ」が余分に重複して表示されるような感じです。

原因は、floatがかかっているボックスの中に幅いっぱいのテキストを入れるとまれに起こる現象らしいです。
僕の場合、幅いっぱいじゃなくてもtext-align:rightでテキストを右に寄せただけでも現象が発生しました。

ネットで調べてみると、100%起こる現象ではない為、根本的な原因がよく解らないらしいのですが、現象が起こるfloatボックスのすぐ下にコメントの記述があると発生しやすいので、コメントを消すと現象が解消されると書かれていました。

20080923-bug2

が、僕が作ったhtmlでは、現象が起こるfloatボックスのすぐ下にコメントが無かった為、他に解消方法がないかといろいろやってみた結果、解消した方法がありました。

それは、現象が起きてきるテキストのすぐ後ろに空のコメントを入れるのです。
この方法でなぜか解消されましたが、この方法が必ず成功するかは解らないので参考までにお願いします。

20080923-bug3

カテゴリー:HP制作, html

コメント - 2件のコメントがあります。

  1. Luvsic より:

    こういう現象もあるのですね、原因が気になるところです^^;
    自分は下記記事を参考にコメントアウトの位置を考えています。
    何がベストなのかははっきりわかっていませんが、ご参考になれば幸いです。
    我的春秋: (X)HTML, XML のコメント記述位置
    http://my-chunqiu.cocolog-n

  2. 管理人 より:

    Luvsicさん >
    上記の現象が発生するのは本当にまれなので原因が掴めずにいます。
    僕の対応方法だと無意味にコメントタグを入れているので、あまり良い方法ではないかもしれませんが、今のところこれしか対応方法が思いつきません。
    何か他に良い方法がありましたら教えていただけると助かります^^;
    教えていただいたサイト、非常に参考になります!
    そこまで考えてコメントタグを使用していなかったので、今後の制作の参考にさせていただきます!
    貴重なコメントをありがとうございましたm(__)m

コメントを残す

コメント内容