Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。

btmup Blog

(X)HTML CSS

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

投稿日:

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

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月号




-(X)HTML, CSS
-, , , ,

Copyright© btmup Blog , 2019 All Rights Reserved Powered by AFFINGER5.