<< IEで、ボーダーがうまく表示されない :: main :: ネットスケープで背景がボックスの下まで表示されない >>

フロートを組むと、IEで文字の一部が下に複製される

去年からずーっと後輩のNちゃんと悩んでいた事。
それはフロートを組んだときに、右側のボックスエリアにある文字の一部が下に複製されてしまう事でした。

当時色々と調べたんだけど解決策が見つからなくて、妥協策として<div class="clear"></div>という空のdivを入れてみたり、スペースを入れて複製を見えなくさせてみたり、CSSで高さを指定して消えたこともあったりと…
何ともいい加減な対応しか出来なくて…。
一番まともな(この中では)空のdivを入れるのも、複製は止められなくて、下に変なマージンが空いてしまったり…。

出るときと出ないときがあって、原因も分からないまま半年以上過ぎていたのですが、今回同じ現象が今やってる案件で起こって、丁度時間もあったので色々と本腰を入れて調べてみた結果、やっと原因が分かりました。

これが何て事は無い原因で…。
問題はCSSではなく、htmlにあったのです。


原因:
フロートのボックス指定の間に2行以上のコメントタグを入れると発生する。


言葉で説明しても何のこっちゃ?って感じだと思いますので、サンプルソースを。。。


CSSの指定

#left {
margin: 0px;
padding: 0px;
width: 300px;
float: left;
}

#right {
margin: 0px;
padding: 0px;
width: 500px;
float: right;
}


htmlの指定

<!--left area Start -->
<div id="left">
<p>こちらは左側です</p>
</div>
<!--left area End -->
<!--right area Start -->
<div id="right">
<p>こちらは右側です</p>
</div>
<!--right area End -->



と、このように組むと発生します。
それは、
<!--left area Start -->
<div id="left">
<p>こちらは左側です</p>
</div>
<!--left area End -->
<!--right area Start -->

<div id="right">
<p>こちらは右側です</p>
</div>
<!--right area End -->
太字の所、ここに2行のコメントタグが入っているから。
このコメントタグの行数が多ければ多いほど、複製される文字数も増えます。

これを

htmlの指定

<!--left area Start -->
<div id="left">
<p>こちらは左側です</p>
</div>
<!--left area End -->
<div id="right">
<!--right area Start -->
<p>こちらは右側です</p>
<!--right area End -->
</div>



と、してあげると、html上で連続したフロート指定のボックスとボックスの間にコメントは1行なので、複製される現象は起こりません。
ただ、これだとコメントをつけるルールが曖昧というか中途半端なので、

htmlの指定

<div id="left">
<!--left area Start -->
<p>こちらは左側です</p>
<!--left area End -->
</div>
<div id="right">
<!--right area Start -->
<p>こちらは右側です</p>
<!--right area End -->
</div>


このように、コメントタグはdivで指定したボックスの内側にいれてあげれば、複製の心配も無く、コメントをつけるルールも統一できます。


まさかこんな原因だとは思わず、後輩と2人で脱力してしまいましたが(笑)何とか無事解決ということで!


*追記|09.02.19*
コメントタグだけじゃなく、<hr />とかでもダメでした。
ようは、floatの間に何か入ったらダメって事なのかな。
今回、CSS切らないとhrが表示されないようにしてたし。
コメントタグ1行でも出たって方もいるみたいなので、何も入れるなってことですかね…IEさん(涙)
 

Posted by 黒木 一紗
Category: Coding memo > Windows IE > ~IE6 | 25 comments | 0 trackback

Comments

oQ[ at 2010/03/10 01:06 PM
oQ[mɗVׂTCgaIX^[r[`ŗz̊֌W
A_gSNS at 2010/03/09 01:59 PM
A_gSNS͍b蕦!!̎qB̃Gb`AX̃}fʐ^͗v`FbN
SMx`FbJ[ at 2010/03/08 07:46 PM
SMx`FbJ[ʼnBꂽȂ`FbNIR݉ňCɋCɂȂlƂ̒k߂悤
X^[r[` at 2010/03/07 08:37 PM
łmNO.1ւX^[r[`AĂIł̗vfς‚܂TCgŏo̂
X^[r[` at 2010/03/06 07:44 PM
˔@ƂďX^[r[`dAINđhiX^[r[`
at 2010/03/06 03:40 AM
yĂĂȂĎvȂ́cn()n ͗񂾁`āi΁j(^_^;)BAɂ͂Ȃ́cގق`(;; t[̐l܂񂩁Hlɂĉ@beat-angel.risa@docomo.ne.jp
ozXg at 2010/03/04 07:34 PM
jłI l̎ӗ͋MAߏozXg͏t]Ň
oQ[ at 2010/03/03 07:45 PM
oQ[ōR⍥p[eB[JÒICxg肾̃oQ[
ެ at 2010/03/02 07:11 PM
ެق͑flzXgɕĂ炤тYꂸA~𖞂Ă܂BެْBčzVĂ
SMx`FbJ[ at 2010/03/01 07:30 PM
SMx񂽂ffŁA^ʖڂȂ̖cfȂ̖̖{ASMx`FbJ[Ŗ\
X^[r[` at 2010/02/28 09:17 PM
AX^[r[`I{ő̗FBTTCg‚ɕAi𐋂VX^rĂ݂܂
mR~ at 2010/02/27 07:38 PM
PCΉIfƒR~jeBTCgmR~łł𖞋i܂
at 2010/02/26 07:52 PM
‚ŋߓƂ炵n߂܂S(V^^)m藿悧I悩烁[ĉ(o~~)N̐l̓Slc(*_ _)l[҂Ă܂september9-love9@docomo.ne.jp
Iij[ at 2010/02/25 07:20 PM
⏗̎q̃Iij[͏펯B𕥂ĎۂɃIij[Ă炢Ap̂J߂̂̃c{
l_ at 2010/02/23 07:25 PM
b̗l_IIăZN[XłIIRICHł̓ZuɉĂ炢̃ZN[XCty߂܂
ex`FbJ[ at 2010/02/22 08:38 PM
ގAޏoȂNB̐[wSO𖾁݂ȂŃex`FbJ[āAɃeKuԂYoffA`X𓦂
mR~ at 2010/02/21 08:58 PM
lCR~jeB[TCgƂȂoQ[Ił̃R~jeB[TCgmR~𔭐MIŃJVޏGET悤
X^r at 2010/02/20 07:42 PM
ẴX^rII獏܂AVȈR}
at 2010/02/19 08:01 PM
߂܂Ă݂Č܂PNȏĂ܂c(/ށ_)낻zLŗȁ[ȂĎvĂ܂o(^-^o)CɂȂl̓[Ă fly.me.so.high-@docomo.ne.jp
X|bg at 2010/02/18 07:12 PM
Œ10~ۂX^[g鉇X|bgBsnBႢj߂ďW܂Ă܂
X^[r[` at 2010/02/17 07:35 PM
łĂقTCgŃ_gcNO.1łX^[r[`ƂƂIIȑOɂ܂ĂpҗlɖĂō̃VXeɂȂĂ܂
oQ[ at 2010/02/16 07:29 PM
oQ[~NVBAO[łłȂlNEWX^[r[`ȂmɂłQbg
ユウカ at 2008/12/18 06:00 PM
私もちょうど今、仕事でコーディング中に
同じ不具合が出て、検索してたどりつきました。

似た系のIE6のバグで、widthをきつきつに
組んだときにも、変に複製されることがありましたが、
見やすく分かりやすくするためのコメントが
原因だったとは・・・!

おかげさまで、無事に解決して納品することができます。
ありがとうございました。
ちぇるる at 2008/05/27 06:35 PM
初めまして。私もこのバグで悩んでいたので助かりました。ありがとうございます!
これですっきりしました。
ab at 2008/01/24 10:58 PM
検索してたどり着きました。
おかげでスッキリ解決する事が出来ました。
ありがとうございました。

Comment Form


Trackback

CALENDAR
New Entries
Categories
Recommend
現場のプロから学ぶXHTML+CSS

現場のプロから学ぶXHTML+CSS

Movable Type プロフェッショナル・スタイル MT4.1対応

Movable Type プロフェッショナル・スタイル MT4.1対応

Movable Type WEBデザインの新しいルール

Movable Type WEBデザインの新しいルール

プロとして恥ずかしくないスタイルシートの大原則

プロとして恥ずかしくないスタイルシートの大原則

DREAMWEAVER8による至極のCSSレイアウトデザイン! パーフェクトブック。

DREAMWEAVER8による至極のCSSレイアウトデザイン! パーフェクトブック。

Webユーザビリティ・デザイン  Web制作者が身につけておくべき新・100の法則。

Webユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。

Web標準XHTML+CSSデザイン  クリエイターが身につけておくべき新・100の法則。

Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。

ちゃんとCSSするためのスタイルガイド入門 (スタイルシートスタイルブック (2))

ちゃんとCSSするためのスタイルガイド入門 (スタイルシートスタイルブック (2))

Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト

Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト

Recent Comments
Archives
Profile
Other
  • count : hits!