ホーム > Programming > CSS > float要素の末尾のテキストが意図しない場所に複製表示される問題 : CSS

 タグ : ,

float要素の末尾のテキストが意図しない場所に複製表示される問題 : CSS

投稿日 : 2009年3月15日 | 更新日 : 2010年09月15日 前のページへ戻る

float要素に記述したテキストの中で末尾のテキストが意図しない場所に複製表示される問題についての覚書。

現象

フロートボックスのテキストの末尾にある数文字が、複製されて意図しない場所(ボックス外など)に表示される。 ２段組,３段組,それ以上でもこの現象が発生しない場合もある(発生しないほうが多数?)。

解決策

下記の(1),(2)のどちらかで解消(どちらでも解消された) (1) フロートしている各ボックスの横幅の合計を、包含ボックスの横幅より3px以上小さくする。 (2)問題が発生しているフロートボックスを中心にコメントを削除(フロートしているボックス内のコメントだけとは限らない)

発生したコード

<div class="content" style="width:500px; height: 500px;">
    <div id="sidebar" style="width:100px; height: 500px; float: left;">～</div>
    <div id="mainGraphic" style="width:400px; height: 100px; float: right;">～</div>
    <div id="main" style="width:300px; height: 400px; float: left;">～</div>
    
    <div id="extrabar" style="width:100px; height: 400px; float: right;">この要素で発生。このボックス内の最後の文章の数文字が複製され意図しない場所に表示。pやulなどタグを変更して文章を囲んでも同様に意図しない場所に表示</div>
</div>
※WordPressのテンプレートで表示したときは上記の現象が発生したが、べた組みのHTML,CSSの場合は発生しなかった(再現も難しい)。

解決策1

mainGraphic ⇒ width: 397pxへ変更 extrabar ⇒ width: 97pxへ変更

解決策2

コメント<!– extrabar –>を削除 参考記事 » IE6 で文章の最後の2文字（くらい）が変なところに表示されてしまう問題の原因と解決法。

CSS,WordPress | 固定リンク | Comments (0)

関連記事

    関連記事は見つかりませんでした。
    検索ボックスからの検索もお試しください。

このページの上へ移動

コメント

コメントはまだありません。

コメントの投稿

改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。

 

 

 


トラックバックURL

http://www.findxfine.com/programming/css/1057.html/trackback

このページの上へ