最新のイラスト、同人誌、イベントへの参加、などの情報は、こちらのサークルWEBサイトで随時更新しています。
イラストに興味のある方は、サークルWEBサイトもどうぞよろしくお願いします。
最新のイラスト、同人誌、イベントへの参加、などの情報は、こちらのサークルWEBサイトで随時更新しています。
イラストに興味のある方は、サークルWEBサイトもどうぞよろしくお願いします。
よく、バグが多いバグが多いと嘆かれ続ける、業界ナンバーワンシェアの我らがふぁっきんIE様。
で、今日もまた恒例のバグに直面したわけです。それがタイトルにあるとおり、コンテンツ内容が複製されるバグというやつ。どうにか無事解決も出来たので、今回もメモがてらに書いてみます。内容は長くなるので以下に。
コンテンツ内容が複製される、別の言い方をすると、最後の内容物のゴーストが作成されるとでも言うのでしょうか。もしくは分身とか残像とかそんな感じ。
言葉だけだとわかり辛いので、画像を用意してみました。
Opera9で見た場合
IE6で見た場合
こんな感じで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だと少ないかも。でも、閉じタグの直後にコメントがあると、その閉じタグがどの要素の閉じタグなのかが解り易いと思いませんか。特に、数人で編集するようなことがある時とか。
こういう、フツウにやってる分には全然直面しないバグとか、物凄い困りますよね。それに解決方法も中々見つからないと、どうやって探していいのかもわかんなくなってくるし。
なんかコメントをつける以外に、その閉じタグがどのタグの閉じタグなのか、を解り易くする方法ってないもんですかね。
StyleStore/コーディングルール
HTMLコーディングルールについて ▲ ▼基本ルール XHTMLの書き方に準拠 </div>の前にはコメントを入れる ※idのときは<!-- //#hoge -->、classのときは<!--// .hoge --> ※</div>...
かなり専門的ですな。仕事としてやってないとついていけませんｗ
本の値段だけど、わしは雑誌系以外は見るかな。でかい本屋行ったら芸術のコーナー見るんだけど、結構するのが多い。1500円以上がデフォルトぽい。
助かります！感謝ですっ！
私もこれは毎回悩んでいました。
状態が再現したりしなかったりで、検索するワードが悪いのか本記事のようなずばっと的確かつわかりやすい解説に出会えていませんでした。
そもそも、コメントタグが原因だと気づいているくらいなら悩んでないわけなので、コメントタグを前提に調べたりしてなかったですからねー。
とにもかくにも助かりました！ありがとうございました。
コメントありがとうございます。遅レスですが。
自分も、この問題で検索してるときに本当に解決方法が見つかんなかったので、解決方法がわかったら「自分と同じ様なワードで検索する人に見つけやすい記事」を目指して書いてみました。
なので、そんな感じで賛辞をいただくと物凄い嬉しい限りです。
＞G様
1ヶ月遅れの超亀レスですが、やっぱり値段見るのは高いかなーとか思ってる本だけなんですかねぇ。雑誌とか小説とかって高そうとか、あんまり思わないですしｗ
1年前の記事にコメントするのもどうかと思いますが、助かりました。
ありがとうございます。
本当にIE6はファッキン野郎です。
はじめまして！
これ、昔ハマってとても苦労した経験があります・・。
なんの閉じタグか分かりやすくするコメントとしては、
みたいに、divタグの中に入れちゃうと確かバグが発生せずに、かつコメントもかけるので便利です♪
タグ部分が消えてしまったので・・
<!-- comment --></div>
って書いてました・・。
＞えどさん
どうも、はじめまして。
情報ありがとうございます。
閉じタグの前にコメントですかー。
たしか、昔試したときに何かしら問題があったとかで、やめてた気がするんです。
でも、何が問題だったのかが思い出せない＆検索してもでてこない、なのでウチの会社だけでの問題だったのかも・・・。
もしくは古いブラウザでの話だったのかなぁ。
次のコーディングのときに閉じタグ前コメント、使ってみます。
「IE6 文字 複製」でこちらにたどり着きました。
参考にさせて頂きました。ありがとうございます。
ただ、私のケースではコメントを入れていない状態でも同じバグが発生しておりまして、テキストの最後にタグを入れることで解決しました。
おそらくfloatが原因？
一応ご報告まで…
えどさん同様、タグが消えてしまいました…orz
入れたのはbrタグです。
＞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アップデート時に対応してみます。
参考にさせていただきました。
親要素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;
}
です。
同じように、一番最後のテキストテキストの残像が見られればいいんですが。。。
お時間がありましたら、ご教授お願いいたします。
>さわみさん
コメントありがとうございます。
コメント内にHTMLタグを普通に書くとちゃんと表示されなかったりするので、ちゃんと理解できてなくて申し訳ないんですが、コメント内のCSSを見る限りでは、おそらくコメントのバグではなく、IE6のwidth、border関連のバグなんじゃないのかな、と思います。
ご存知かもしれませんが、HTMLのDOCTYPEによってIE6はWidth+Border+Paddingなどの解釈が変わってくるので、width+border+padding+marginの合計値などしっかり計算（例の通りだと、全部の数値の合計で200px以内に）してみるといいかもしれません。
あと、10番のコメントにも書いているようなことが原因かもしれません。
今わかる範囲だとこのぐらいなのですが、もしこれでも直らないようでしたら、またコメントください。
コメントアウトがバグの原因だとは・・・
ありがとうございました。
助かりました！
ひっそりこそこそ、更新中。更新頻度が悪いのはデフォルトです。絵描いたり、色々デザインやったりしてます。何かしらの連絡、用件などは下記コンタクトからお願いします。
| SUN | MON | TUE | WED | THU | FRI | SAT |
|---|---|---|---|---|---|---|
| « SEP | NEXT | |||||
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 | 31 | ||
HTML convert time: 0.424 sec. Powerd by