日本語を半角英数字にすると画像にCSSのfloat:rightを指定していても無効になる問題について。

解決済

質問者：nana_watuki
質問日時：2006/09/06 00:26
回答数：3件

下記のように記述すると問題なく動作するのですが、「サンプル」の部分を「sample」などのように
半角英数字にすると画像にCSSのfloat:rightを指定していても無効になります。

<html>
<style type="text/css">
#right { float: right; }
</style>
</head>
<body>
<img src="sample.jpg" width="320" height="320" id="right">
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
</body>
</html>

なぜこのような現状が起こるのでしょうか？
ご存じの方がおられましたらご回答をよろしくおねがいします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.1

回答者： noname#20377
回答日時：2006/09/06 01:15

はっきりとはわからないし考えるの面倒くさいので

質問者様と後の回答者に丸投げします
参考になるかもしれないので。

おっしゃる現象自体かは判りませんが、
p要素の文章が半角の時、左側に行かず、次の行に改行されてしまう現象が、IE 7 RC 1標準モード(DOCTYPE付け足した),Opera 9.01, Minefield(Firefox 3.0a1)で発生しました。

当方手元にあるのがMinefieldなのでIEで再現するかわかりませんが、まずは以下のhtmlを順に開いてみてください。borderは単なる趣味です(汗

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html>
<head>
<style type="text/css">
#right { float: right; }
</style>
<title>実験</title>
</head>
<body>
<img src="gerd.png" width="320" height="320" id="right">
<p style="border-color:red;border-style:solid;">
samplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesample
</p>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html>
<head>
<style type="text/css">
#right { float: right; }
</style>
<title>実験</title>
</head>
<body>
<img src="sample.jpg" width="320" height="320" id="right">
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html>
<head>
<style type="text/css">
#right { float: right; }
</style>
<title>ほげ</title>
</head>
<body>
<img src="gerd.png" width="320" height="320" id="right">
<p style="border-color:red;border-style:solid;">

a quick brown fox jumps over the lazy dog. a quick brown fox jumps over the lazy dog. a quick brown fox jumps over the lazy dog.

</p>
</body>
</html>

全部結果が異なるはずです。

もし参考になるとすればこれかなぁ・・・・
http://www.d-toybox.com/studio/weblog/show.php?m …

- 0
- 件

通報する

No.2ベストアンサー

回答者： noname#20377
回答日時：2006/09/06 01:19

#1だ。

「これ」じゃわかるわけないな。

8月14日「URLの折り返し問題はGecko(Firefox)のバグなのか?」

と

8月17日「Re: firefoxのurlライン・ブレーク問題」

です。id属性が振られてないので個々にアクセスしづらい(汗

- 0
- 件

通報する

この回答へのお礼

リンク先の内容を読ませていただきました。
レイアウト時における文字列折り返しに標準仕様が無いのであれば
独自仕様のあるIEなどを除けば解決方法はないようですね。

ご回答いただきどうもありがとうございました。

通報する

お礼日時：2006/09/06 10:14

No.3

回答者： talepanda
回答日時：2006/09/06 01:31

float:rightが無効になっているわけではなく、連続した半角英字は一単語として処理されるので折り返されないだけでしょう。

word-break: break-all;

でいいかと。

- 0
- 件

通報する

この回答へのお礼

IEならこれで問題を解決することができるのですが
word-breakプロパティは、IEが独自に採用したものなので
IE以外だと使用できないという問題があります。
W3Cが標準仕様を定めて各ブラウザがそれぞれ採用してくれれば
このような問題は起きないのですが・・・

ご回答いただきどうもありがとうございました。

通報する

お礼日時：2006/09/06 10:20

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！