Home > (X)HTML | CSS > IE6 で文章の最後の2文字(くらい)が変なところに表示されてしまう問題の原因と解決法。

IE6 で文章の最後の2文字(くらい)が変なところに表示されてしまう問題の原因と解決法。

[読了時間の目安:約 3 分]

ひょっとしたら定番ネタかも知れないのですが、ググってみても情報が見当たらなかったのでとりあえずメモ。

IE6 で float を使ったレイアウトをしているとき、文章の末尾(最後の2文字くらい)が変なところに表示されるということがあります。
どう変かというと、末尾の文字をそのままコピーしてはみ出たような、そんな感じです。
もちろんソースにそんなものは含まれていません。
JavaScript や PHP なんかを使っている訳ではなく、純粋に HTML と CSS のみでもこのような事象が起こります。

で、とりあえずググってみて見つかったのは下記2つの記事。

»コメント文が出力に影響!?
»IE6のバカヤロウ (room ant)

これらを読んで、とりあえず「float を使っていて HTML にコメント文が含まれていると危ない」ことは分かりました。

が、どうもはっきりした原因や発生条件が分からないので、引き続き調査を実施。
すると、手元にあった「web creators」の 2008 年 2 月号で「CSS のアクシデントを解決する 92 の方法」という特集が組まれており、その中にドンピシャ(古)な内容が掲載されていました(P.38)。

それによると、この事象は

float した複数の要素の横幅合計と、それらを包含する親要素の width プロパティの差が 3px 未満かつ、HTML ソース内にコメントが入っている場合に起こる

ということです。なので解決法は、

包含する親要素の横幅を 3px 大きくする、あるいは HTML ソース内のコメントを削除する

の 2 通りということになります。

レイアウトを変更する訳にはいかないので、今回はコメント文を削除することで解決しました。
(一応横幅を変えたり float を試しに外してみたりしましたが、ちゃんと解消されていました)

ただまぁ、ほぼ手打ちでコーディングをやってるのでコメントを付けられないのはちょっと不安。
書き込む場所を変えたら良いもんでもないみたいですし。

コメント文でバグって、ワケ分かんないですね。
早く IE7 が普及してくれたら良いなぁ。

購入手段

今回紹介した本はこちらの通販か、お近くの書店でどうぞ。
(だいぶ古いですけど)

↓Amazon

photo
Web creators (ウェブクリエイターズ) 2008年 02月号 [雑誌]
インプレスコミュニケーションズ 2007-12-27
売り上げランキング :
評価

by G-Tools , 2009/03/10

↓インプレスの通販サイト
impress Direct web creators 2008年2月号

Comments:1

micca 09-03-15 (日) 22:58

こんばんは。
これ、僕も悩まされました。
その時は、
<タグ>
</タグ><コメント>
を、
<タグ>
<コメント></タグ>
にしたら直ったと思います。

Comment Form
Remember personal info

Trackbacks:1

Trackback URL for this entry
http://blog.btmup.com/xhtml/ie6-final-letter-bug.html/trackback
Listed below are links to weblogs that reference
IE6 で文章の最後の2文字(くらい)が変なところに表示されてしまう問題の原因と解決法。 from btmup Blog
pingback from float要素の末尾のテキストが意図しない場所に複製表示される問題 : CSS « FindxFine | Web制作に関するメモ 10-09-15 (水) 17:47

[...] 参考記事 » IE6 で文章の最後の2文字(くらい)が変なところに表示されてしまう問題の原因と解決法。 [...]

Home > (X)HTML | CSS > IE6 で文章の最後の2文字(くらい)が変なところに表示されてしまう問題の原因と解決法。

リンク
フィード
メタ情報

このページのトップへ