btmup Blog

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

(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
-, , , ,

執筆者:


  1. micca より:

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

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

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

Firefox でテーブルの線(border)が表示されたりされなかったりする件の対策。

珍しく Firefox のバグです(だと思います)。 あえて「解決法」ではなく「対策」としたのは、解決したかどうか定かではないからです。 つまり、「よく分からんけど、とりあえずうまくいってるっぽい」と …

no image

jQuery で CSS を切り替えて文字サイズを変更する 2 つの方法。

最近、文字サイズの切り替えボタンを設置しているサイトも多くなってきましたね。 自治体や病院など公共性の高いサイトを中心に、導入が進んでいるようです。 僕自身も医療系のサイトに関わることが多いのですが、 …

no image

col/colgroup 要素で有効なスタイルと無効なスタイル。

「ある列だけを改行なしにしたい」というときが結構あります。 確実なのは「その列のすべての td タグに class を付けていく」という方法ですが、あまりスマートとは言えません。 ソースの見栄え的にも …

no image

HTML 文字参照を探すのに Wikipedia はやっぱり便利だった。

Wikipedia には度々お世話になってます。 信頼性とかが問題になることもありますが、大体は大丈夫ですし、やはりあの圧倒的な情報量は魅力ですね。 で、(やっぱり)こんなものまであったのか! という …

no image

CSS Nite in OSAKA, Vol.17 に参加してきました。

7/18(土)に開催された「CSS Nite in OSAKA, Vol.17 powered by KAGOYA Internet Routing」に参加してきました。 参加というか、まぁ勉強ですね …