ひょっとしたら定番ネタかも知れないのですが、ググってみても情報が見当たらなかったのでとりあえずメモ。
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
- Web creators (ウェブクリエイターズ) 2008年 02月号 [雑誌]
- インプレスコミュニケーションズ 2007-12-27
- 売り上げランキング :
- 評価
by G-Tools , 2009/03/10
↓インプレスの通販サイト
impress Direct web creators 2008年2月号