2007.09.10 Monday
フロートを組むと、IEで文字の一部が下に複製される
去年からずーっと後輩のNちゃんと悩んでいた事。
それはフロートを組んだときに、右側のボックスエリアにある文字の一部が下に複製されてしまう事でした。
当時色々と調べたんだけど解決策が見つからなくて、妥協策として<div class="clear"></div>という空のdivを入れてみたり、スペースを入れて複製を見えなくさせてみたり、CSSで高さを指定して消えたこともあったりと…
何ともいい加減な対応しか出来なくて…。
一番まともな（この中では）空のdivを入れるのも、複製は止められなくて、下に変なマージンが空いてしまったり…。
出るときと出ないときがあって、原因も分からないまま半年以上過ぎていたのですが、今回同じ現象が今やってる案件で起こって、丁度時間もあったので色々と本腰を入れて調べてみた結果、やっと原因が分かりました。
これが何て事は無い原因で…。
問題はCSSではなく、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 -->
太字の所、ここに2行のコメントタグが入っているから。
このコメントタグの行数が多ければ多いほど、複製される文字数も増えます。
これを
と、してあげると、html上で連続したフロート指定のボックスとボックスの間にコメントは1行なので、複製される現象は起こりません。
ただ、これだとコメントをつけるルールが曖昧というか中途半端なので、
このように、コメントタグはdivで指定したボックスの内側にいれてあげれば、複製の心配も無く、コメントをつけるルールも統一できます。
まさかこんな原因だとは思わず、後輩と2人で脱力してしまいましたが（笑）何とか無事解決ということで！
*追記｜09.02.19*
コメントタグだけじゃなく、<hr />とかでもダメでした。
ようは、floatの間に何か入ったらダメって事なのかな。
今回、CSS切らないとhrが表示されないようにしてたし。
コメントタグ1行でも出たって方もいるみたいなので、何も入れるなってことですかね…IEさん（涙）
それはフロートを組んだときに、右側のボックスエリアにある文字の一部が下に複製されてしまう事でした。
当時色々と調べたんだけど解決策が見つからなくて、妥協策として<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 |
47 comments |
0 trackback
Comments
同じ不具合が出て、検索してたどりつきました。
似た系のIE6のバグで、widthをきつきつに
組んだときにも、変に複製されることがありましたが、
見やすく分かりやすくするためのコメントが
原因だったとは・・・！
おかげさまで、無事に解決して納品することができます。
ありがとうございました。
これですっきりしました。
おかげでスッキリ解決する事が出来ました。
ありがとうございました。
Comment Form