CSSで最後の四文字が改行して繰り返される・・・

質問

はじめまして。
現在、CSSを勉強中のものです。
今回、IE6でみると原因不明の問題が発生していました。
<p>タグにclassをつけて文字を挿入しているのですが、なぜかそこの部分のテキストの最後の「4文字」が改行されて下の段に表示されます。

同じclassの部分にはすべて同じ現象が見られました。

どなたか原因や解決方法をご存知の方は、教えていただけないでしょうか？
問題のclassの部分は以下のようになっています。

.text01 {
width: 180px;
float: right;
margin-top: 15px;
color: #666666;
font-size: 12px;
text-align: justify;
text-justify: distribute;
}

回答No.4

ambercoco · ベストアンサー

特定のURLが入っていない限りhtmlからホームページを特定するのは無理だと思います。

----改行取り払い前----
<div class="box2">
<div class="box_left">
<a href="special3.html"><img class="img01" src="img/photo3.jpg" alt="" /></a>
<a href="special3.html"><img class="title" src="img/title3.gif" alt="" width="180" height="20" /></a>
<p class="text01">『○○○○○』</p>
</div>
<div class="box_right">
<a href="special4.html"><img class="img01" src="img/photo4.jpg" alt="" /></a>
<a href="special4.html"><img class="title" src="img/title4.gif" alt="" width="180" height="20" /></a>
<p class="text01">『○○○○○』</p>
</div>
</div>
-------

↑の部分ですが、</p>まわりの改行を全て取り払ってもう一度試していただけますか？

----改行取り払い後----
<div class="box2">
<div class="box_left"><a href="special3.html"><img class="img01" src="img/photo3.jpg" alt="" /></a>
<a href="special3.html"><img class="title" src="img/title3.gif" alt="" width="180" height="20" /></a>
<p class="text01">『○○○○○』</p></div><div class="box_right">
<a href="special4.html"><img class="img01" src="img/photo4.jpg" alt="" /></a>
<a href="special4.html"><img class="title" src="img/title4.gif" alt="" width="180" height="20" /></a>
<p class="text01">『○○○○○』</p></div></div>
-------

htmlの可読性が落ちますが、とりあえず試して頂けますでしょうか。
多分、原因は</p>の後の</div>を改行してる所だと思います。

もちろん、私も普段はBOTTEGA_Vさんのように要所要所に改行を入れて読みやすいようにhtmlを書きます。この書き方が悪いわけではありません。
普段はこれでも問題は起こらないんですが、本当に時たま、何らかの原因で最後の4文字リピートが発生するんですよね・・・。

お礼

ありがとうございます。
早速試してみましたが、やはりダメでした・・・orz

ひとまず、さきほどいただいた回答の空白を4つ挿入（コード上）でなんとか解決させていただきました。

色々検証してみます。
本当にいろいろありがとうございました。

回答No.3

ambercoco

> margin：left○pxとfloat：leftを同時に指定すると
> 2倍marginが広がって表示される？ような気がします・・・

それはIE6にある有名なfloatまわりのバグです。
"IE6 float バグ" で検索すると色々解決策が出てきます。
css内のdiv#wrap に display:inline; を入れると解決するはずです。

最後の4文字分が繰り返される件については、コメント・改行削除でも
解決しない場合、</p>の前に&nbsp;を4つ入れて、見た目だけ解決した事があります。
結局最後の4文字は繰り返されるのですが、半角スペースなので表示されても見えません。

---
<p>文章が入ります。&nbsp;&nbsp;&nbsp;&nbsp;</p>
---

あとは問題の部分を一度削除して、もう一度打ち直すとか・・・。
そういえばこの現象が発生するときは必ずDreamWeaverを使用していました。何か関係あるんでしょうかね。

Web制作をここ3年程やっていますが、この最後4文字繰り返し現象は今までに1桁位しか発生したことがありません。かなりレアな現象だと思います。
その時に色々と検索してみたんですが、発生条件すら分かりませんでした。

私の経験上、発生条件は以下の通りです。
1.html内に改行がある（<br />ではない普通の改行）
2.html内にコメントが入っている
3.pでしか発生したことがない
3.</p>のすぐ後に</div>がある
4.そのpはfloatしている

参考までに差し支えない範囲でhtmlを公開していただけますか？

以前に同じ現象にあわれた方がいらっしゃるようなので、URLを貼っておきます。その方はコメント削除で解決されたようです。

参考URL：

http://okwave.jp/qa2925778.html

お礼

ありがとうございます。
ご指摘の発生条件1以外はすべて当てはまりました。

過去の質問も参考にさせていただきながら、ひとつづつ検証してみます。
htmlを掲載したのですが、途中までクラス名やID名を修正したのですが、全部はやはりきつくなってしまって・・・（笑

ちなみにhtmlからホームページを特定される可能性ってありますでしょうか？

補足

<!-- ********* 右側 ******** -->
<div id="right">
<div id="main">
<div class="box1">
<div class="box_left">
<a href="special1.html"><img class="img01" src="img/photo1.jpg" alt="" width="90" height="90" /></a>
<a href="special1.html"><img class="title" src="img/title1.gif" alt="" width="180" height="20" /></a><p class="text02">『○○○○○』</p></div>
<div class="box_right">
<a href="special2.html"><img class="img01" src="img/photo2.jpg" alt="" width="90" height="90" /></a>
<a href="special2.html"><img class="title" src="img/title2.gif" alt="" width="180" height="20" /></a>
<p class="text01">『○○○○○』</p>
</div>
</div>
<div class="box2">
<div class="box_left">
<a href="special3.html"><img class="img01" src="img/photo3.jpg" alt="" /></a>
<a href="special3.html"><img class="title" src="img/title3.gif" alt="" width="180" height="20" /></a>
<p class="text01">『○○○○○』</p>
</div>
<div class="box_right">
<a href="special4.html"><img class="img01" src="img/photo4.jpg" alt="" /></a>
<a href="special4.html"><img class="title" src="img/title4.gif" alt="" width="180" height="20" /></a>
<p class="text01">『○○○○○』</p>
</div>
</div>
<div class="box2">
<div class="box_left">
<a href="special5.html"><img class="img01" src="img/abc.jpg" alt="" width="90" height="90" /></a>
<a href="special5.html"><img class="title" src="img/abc.gif" alt="" width="180" height="20" /></a>
<p class="text01">『○○○○○』</p>
</div>
<div class="box_right">
<div align="right"><a href="coupon.html"><img src="img/abc.gif" alt="" width="275" height="60" /></a><br />
>>○○○○○<a href="coupon.html">○○○○○</a></div>
</div>
</div>
</div>
<div id="abc">
<img class="title_bar" src="img/123.gif" alt="" />
</div>
</div>
<!-- ********* 左側 ******** -->

回答No.2

Phoebastria

テキストは英文が混じっていないでしょうか。
英文は強制的に改行されます。それにより何文字か分は空く事はあります。
text-align: justify;にしていてもスペースは空きます。（ブラウザにより挙動に違いはあれど）
widthやfont-sizeを変更したり、英文等がなくても必ず4文字分空くようでしたら他のCSSの記述も見ないと分からないかもしれません。

お礼

早速の解答まことにありがとうございました。

実はスペースではなくて、同じ文字が4文字繰り返されてしまうのです。
<p class="text01">123456789123456789</p>
という具合なんですが、IE6でみると、最後の「6789」の文字が改行されて繰り返し表示されてしまいます・・・

もし、こちらでなにかお気づきの点などあれば、どうかよろしくお願いいたします。

本当にありがとうございました

回答No.1

ambercoco

私も何度かIE6だけで同じ現象が発生したことがあります。
Firefox、Opera、IE7では発生したことがありません。
原因は不明ですが（多分CSSの問題ではなくIE6にあるような・・・）
いつもhtml中の改行を除いて解決しています。

例えば、
-------------------
<p>
文章が入ります。
</p>

<p>
文章が入ります。
</p>
-------------------

↑のようなhtmlの改行を、

-------------------
<p>文章が入ります。</p><p>文章が入ります。</p>
-------------------

このように除いています。

どのような条件で発生するのか私もよく分からないですし、
改行を除くのが根本的な解決になっているのかも分からないのでご参考までに・・・。

お礼

早速の解答本当にありがとうございます。
実はIE6で確認したのは初めてなのですが、改めてよく見るとなぜか大枠の<#wrap>の幅も10pxほどでしょうか？右側が余計に広くなっていました＞＜

firefoxやIE7だとこんなことは一度もなかったんですが・・・

今回質問させていただいた内容はじつは<p></p>は×4つがそれぞれ文章の末文が4文字下の段に繰り返し表示されているような状態となっています。

DWで作成しているので、念のため余分なスペースや改行などは覗いてみたのですが、解決にはいたりませんでした・・・

wrapに関してもなにかご助言があればどうかよろしくお願いいたします。

補足

すみません・・・大枠のwrapについてですが、今いろいろ試してみたところ、なんとか糸口が見つかってきました。
見当違いかもしれませんが・・・

margin：left○pxとfloat：leftを同時に指定すると2倍marginが広がって表示される？ような気がします・・・

色々試してみます。
ありがとうございました。