Circle WEBsite サークルWEBサイト

最新のイラスト、同人誌、イベントへの参加、などの情報は、こちらのサークルWEBサイトで随時更新しています。

イラストに興味のある方は、サークルWEBサイトもどうぞよろしくお願いします。

Recent Illustrations 最近のイラスト
西方寺階段にて。
hic03表紙絵
hicv2表紙絵
じゃっじめんつ初春黒子
初春さん線画
Pixiv Illustrations ピクシブ
Subscribe RSSフィード
Subscribe to RSS Feed HANETSUKI BLOG

 よく、バグが多いバグが多いと嘆かれ続ける、業界ナンバーワンシェアの我らがふぁっきんIE様。

 で、今日もまた恒例のバグに直面したわけです。それがタイトルにあるとおり、コンテンツ内容が複製されるバグというやつ。どうにか無事解決も出来たので、今回もメモがてらに書いてみます。内容は長くなるので以下に

 コンテンツ内容が複製される、別の言い方をすると、最後の内容物のゴーストが作成されるとでも言うのでしょうか。もしくは分身とか残像とかそんな感じ。

 言葉だけだとわかり辛いので、画像を用意してみました。

ブラウザ毎の表示の違いを確認してみる。

バグサンプル1Opera9で見た場合
バグサンプル2IE6で見た場合

 こんな感じでIEの方では最後の内容物の文字が複製されて下にはみ出してます。ちなみに、これが文字じゃなくて背景画像だった場合、背景画像が複製されることもあるそうで。

サンプルソース。

 でサンプルソースはこんな感じ。

<body>
<div id="container">
<div class="left">
フロートしている内容物左
</div><!–– left ––>
<div class="main">
フロートしている内容物中央
</div><!–– main ––>
<div class="right">
フロートしている内容物右
</div><!–– right ––>
<div class="left">
フロートしている内容物左
</div><!–– left ––>
<div class="main">
フロートしている内容物中央
</div><!–– main ––>
<div class="right">
フロートしている内容物右
</div><!–– right ––>
</div><!–– container ––>
</body>

 環境を再現したHTMLはこちら

 この現象に直面して色々ググってみたのですが、探し方が悪いのか全然発見できず。で、海外のサイトなども調べてみるとそれっぽい現象と解決法を発見。というかまさしくそれでした。

 一見するとCSSが悪く、CSSが原因でバグが起こっている印象なのですが、実はこれCSSとHTMLの複合バグというかHTML側を修正すれば解決する現象らしい。

で、問題の解決方法は?

 肝心の解決方法ですが、それは
 「floatさせてるコンテンツとfloatさせてるコンテンツの間にあるHTMLコメントを削除する」または、「floatさせてるコンテンツの前のHTMLコメントを削除する」
 というもの。

 上記のHTMLソースで言うと

<body>
<div id="container">
<div class="left">
フロートしている内容物左
</div><!–– left ––>
<div class="main">
フロートしている内容物中央
</div><!–– main ––>

 こことかの
 <!–– left ––>
 これとかを削除するってことらしい。

無事、問題解決!

 さっそく、削除してみると本当に消えてなくなったり。

 まだ他に別の直し方もあるそうなんですが、それらは根本的問題を解決出来ていないのもあるそうなので、やっぱりコメントを消すのが一番なのだとか。

 なんていうか、ものすごい限定条件っぽいのに、状況によっては起こらなかったりもするので、同じ現象にでくわすこともあまりないかもしれません。各要素の閉じタグの後ろにコメントを入れてる人とかも個人HPだと少ないかも。でも、閉じタグの直後にコメントがあると、その閉じタグがどの要素の閉じタグなのかが解り易いと思いませんか。特に、数人で編集するようなことがある時とか。

 こういう、フツウにやってる分には全然直面しないバグとか、物凄い困りますよね。それに解決方法も中々見つからないと、どうやって探していいのかもわかんなくなってくるし。

 なんかコメントをつける以外に、その閉じタグがどのタグの閉じタグなのか、を解り易くする方法ってないもんですかね。

2008年01月10日:一部修正加筆しました。
 一部修正、加筆しました。問題解決方法がわかった後、ググってみると結構すぐ見つかったりしてちょっとショックでした。
 いや、コメントが原因のバグって前提で探すことも中々ないとは思うけど、すぐ見つかるのもなんかほら・・・。
2008年12月01日:文章を分かりやすく、見やすくなるよう修正しました。
 ブログデザインをリニューアルしたので、それに合わせて文章を分かりやすく、見やすくなるように加筆、修正しました。
 追加した部分は各見出し(ブラウザ毎の表示の...など)です。本文内容の変更はして無いです。
Trackback トラックバック
この記事のトラックバックURI:
http://hane.itigo.jp/archives/60/trackback
Comments コメント
    comment_type != "trackback" && $comment->comment_type != "pingback" && !ereg("", $comment->comment_content) && !ereg("", $comment->comment_content)) { ?>
  1. Comment by G at 2008/1/10 Thursday 1:49:00

    かなり専門的ですな。仕事としてやってないとついていけませんw

    本の値段だけど、わしは雑誌系以外は見るかな。でかい本屋行ったら芸術のコーナー見るんだけど、結構するのが多い。1500円以上がデフォルトぽい。

    comment_type != "trackback" && $comment->comment_type != "pingback" && !ereg("", $comment->comment_content) && !ereg("", $comment->comment_content)) { ?>
  2. Comment by すっきり解決しました at 2008/2/7 Thursday 10:45:28

    助かります!感謝ですっ!
    私もこれは毎回悩んでいました。
    状態が再現したりしなかったりで、検索するワードが悪いのか本記事のようなずばっと的確かつわかりやすい解説に出会えていませんでした。
    そもそも、コメントタグが原因だと気づいているくらいなら悩んでないわけなので、コメントタグを前提に調べたりしてなかったですからねー。
    とにもかくにも助かりました!ありがとうございました。

    comment_type != "trackback" && $comment->comment_type != "pingback" && !ereg("", $comment->comment_content) && !ereg("", $comment->comment_content)) { ?>
  3. Comment by 羽根 由弓 at 2008/2/12 Tuesday 10:02:11

    コメントありがとうございます。遅レスですが。
    自分も、この問題で検索してるときに本当に解決方法が見つかんなかったので、解決方法がわかったら「自分と同じ様なワードで検索する人に見つけやすい記事」を目指して書いてみました。
    なので、そんな感じで賛辞をいただくと物凄い嬉しい限りです。

    >G様
    1ヶ月遅れの超亀レスですが、やっぱり値段見るのは高いかなーとか思ってる本だけなんですかねぇ。雑誌とか小説とかって高そうとか、あんまり思わないですしw

    comment_type != "trackback" && $comment->comment_type != "pingback" && !ereg("", $comment->comment_content) && !ereg("", $comment->comment_content)) { ?>
  4. Comment by asyst at 2009/3/27 Friday 16:07:15

    1年前の記事にコメントするのもどうかと思いますが、助かりました。
    ありがとうございます。
    本当にIE6はファッキン野郎です。

    comment_type != "trackback" && $comment->comment_type != "pingback" && !ereg("", $comment->comment_content) && !ereg("", $comment->comment_content)) { ?>
  5. Comment by えど at 2009/7/29 Wednesday 14:49:24

    はじめまして!
    これ、昔ハマってとても苦労した経験があります・・。
    なんの閉じタグか分かりやすくするコメントとしては、



    みたいに、divタグの中に入れちゃうと確かバグが発生せずに、かつコメントもかけるので便利です♪

    comment_type != "trackback" && $comment->comment_type != "pingback" && !ereg("", $comment->comment_content) && !ereg("", $comment->comment_content)) { ?>
  6. Comment by えど at 2009/7/29 Wednesday 14:50:09

    タグ部分が消えてしまったので・・

    <!-- comment --></div>

    って書いてました・・。

    comment_type != "trackback" && $comment->comment_type != "pingback" && !ereg("", $comment->comment_content) && !ereg("", $comment->comment_content)) { ?>
  7. Comment by 羽根 由弓 at 2009/7/31 Friday 20:12:19

    >えどさん
    どうも、はじめまして。

    情報ありがとうございます。

    閉じタグの前にコメントですかー。
    たしか、昔試したときに何かしら問題があったとかで、やめてた気がするんです。
    でも、何が問題だったのかが思い出せない&検索してもでてこない、なのでウチの会社だけでの問題だったのかも・・・。

    もしくは古いブラウザでの話だったのかなぁ。

    次のコーディングのときに閉じタグ前コメント、使ってみます。

    comment_type != "trackback" && $comment->comment_type != "pingback" && !ereg("", $comment->comment_content) && !ereg("", $comment->comment_content)) { ?>
  8. Comment by yakumo at 2009/12/11 Friday 16:10:31

    「IE6 文字 複製」でこちらにたどり着きました。
    参考にさせて頂きました。ありがとうございます。

    ただ、私のケースではコメントを入れていない状態でも同じバグが発生しておりまして、テキストの最後にタグを入れることで解決しました。
    おそらくfloatが原因?
    一応ご報告まで…

    comment_type != "trackback" && $comment->comment_type != "pingback" && !ereg("", $comment->comment_content) && !ereg("", $comment->comment_content)) { ?>
  9. Comment by yakumo at 2009/12/11 Friday 16:11:39

    えどさん同様、タグが消えてしまいました…orz

    入れたのはbrタグです。

    comment_type != "trackback" && $comment->comment_type != "pingback" && !ereg("", $comment->comment_content) && !ereg("", $comment->comment_content)) { ?>
  10. Comment by 羽根 由弓 at 2009/12/13 Sunday 13:54:49

    >yakumoさん
    はじめまして、どうも情報ありがとうございます。

    コメントを入れない状態でも発生するとのことですが、おそらくコチラのバグではないかな、と思います。

    float後、最後の文字が改行されて表示されるIEのバグの解消法 - Forty-N-FiveBlog
    http://forty-n-five.boy.jp/blog/2009/06/floatie.php

    このバグはIE6で入れ子状態のFloatさせてる要素(divとか)の横幅の合計が、親要素の横幅きっちり過ぎる時に起きやすいバグだったと思います。

    例えば、
    親要素div(width 600px)、要素float(width 200px)x3
    の様な状況です。

    この場合、上記リンク先でも書いていますが、親要素の横幅を子要素floatの数分増やす(3個なら3px)か、子要素floatの横幅を1pxずつ小さくするなどで、対応できたと思います。

    上の例に沿って言えば、
    親要素div(width 603px)、要素float(width 200px)x3
    か、
    親要素div(width 600px)、要素float(width 199px)x3
    という感じになります。

    もし、上記のような状況、バグでは無い様でしたら、お手数ですがまた情報など頂けると嬉しく思います。

    IE6はホント、似たようなバグも多くて調べるのだけでも大変ですよね。IE6のシェア率が1%以下になれば無視出来そうなのに・・・。

    あと、コメントにタグを入れるとどうも消えるっぽいので、次のWordpressアップデート時に対応してみます。

    comment_type != "trackback" && $comment->comment_type != "pingback" && !ereg("", $comment->comment_content) && !ereg("", $comment->comment_content)) { ?>
  11. Comment by さわみ at 2011/7/27 Wednesday 14:34:09

    参考にさせていただきました。

    親要素div(width 600px)、要素float(width 199px)x3

    も、

    コメントの削除も行いましたが、削除されない模様です。

    【html】



    タイトル
    テキストテキスト



    タイトル
    テキストテキスト



    タイトル
    テキストテキスト



    タイトル
    テキストテキスト




    【css】
    .catbox {
    margin-bottom: 20px;
    float: left;
    width: 422px;
    line-height: 1.5;
    border: 1px solid #999;
    padding: 15px 10px 0 10px;
    }
    .catbox dl {
    margin: 0 6px 6px;
    padding: 5px 0 0 40px;
    width: 155px;
    height: 160px;
    }
    .catbox dl {
    zoom:100%;
    }
    .catbox dl dt {
    margin: 0 0 0 30px;
    font-size: 90%;
    border-bottom: 1px dashed #999;
    padding: 0 0 3px 10px;
    }
    .catbox dl dt a {
    text-decoration: none;
    }
    .catbox dl dd {
    font-size: 75%;
    margin: 0;
    padding: 3px 0 10px 30px;
    line-height: 1.5;
    }

    です。
    同じように、一番最後のテキストテキストの残像が見られればいいんですが。。。

    お時間がありましたら、ご教授お願いいたします。

    comment_type != "trackback" && $comment->comment_type != "pingback" && !ereg("", $comment->comment_content) && !ereg("", $comment->comment_content)) { ?>
  12. Comment by 羽根 由弓 at 2011/7/28 Thursday 5:55:20

    >さわみさん
    コメントありがとうございます。

    コメント内にHTMLタグを普通に書くとちゃんと表示されなかったりするので、ちゃんと理解できてなくて申し訳ないんですが、コメント内のCSSを見る限りでは、おそらくコメントのバグではなく、IE6のwidth、border関連のバグなんじゃないのかな、と思います。

    ご存知かもしれませんが、HTMLのDOCTYPEによってIE6はWidth+Border+Paddingなどの解釈が変わってくるので、width+border+padding+marginの合計値などしっかり計算(例の通りだと、全部の数値の合計で200px以内に)してみるといいかもしれません。

    あと、10番のコメントにも書いているようなことが原因かもしれません。

    今わかる範囲だとこのぐらいなのですが、もしこれでも直らないようでしたら、またコメントください。

    comment_type != "trackback" && $comment->comment_type != "pingback" && !ereg("", $comment->comment_content) && !ereg("", $comment->comment_content)) { ?>
  13. Comment by とあるWEB会社のデザイナー at 2012/2/1 Wednesday 16:26:10

    コメントアウトがバグの原因だとは・・・
    ありがとうございました。
    助かりました!

    comment_type != "trackback" && $comment->comment_type != "pingback" && !ereg("", $comment->comment_content) && !ereg("", $comment->comment_content)) { ?>
  14. Comment by Web担当の人 at 2012/8/29 Wednesday 14:59:55

    ありがとうございます。
    目からウロコです。
    大変助かりました。

Add your Comment コメントをどうぞ
Name *
E-mail
URL
Comment *






Managed by Hane Yoshiyumi
Design achieved by Hane Yoshiyumi
Powerd by WORDPRESS

HTML convert time: 0.521 sec. Powerd by