ベストアンサー

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

2006/09/06 00:26

下記のように記述すると問題なく動作するのですが、「サンプル」の部分を「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> なぜこのような現状が起こるのでしょうか？ご存じの方がおられましたらご回答をよろしくおねがいします。

nana_watuki
お礼率61% (142/232)

HTML
回答数3
ありがとう数3

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

noname#20377

2006/09/06 01:19 回答No.2

#1だ。「これ」じゃわかるわけないな。 8月14日「URLの折り返し問題はGecko(Firefox)のバグなのか?」と 8月17日「Re: firefoxのurlライン・ブレーク問題」です。id属性が振られてないので個々にアクセスしづらい(汗

質問者

お礼 2006/09/06 10:14

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

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

talepanda
ベストアンサー率58% (45/77)

2006/09/06 01:31 回答No.3

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

質問者

お礼 2006/09/06 10:20

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

ログインすると、全ての回答が全文表示されます。

noname#20377

2006/09/06 01:15 回答No.1

はっきりとはわからないし考えるの面倒くさいので質問者様と後の回答者に丸投げします参考になるかもしれないので。おっしゃる現象自体かは判りませんが、 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.dtd"> <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.dtd"> <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?mode=monthly&year=2006&month=08

ログインすると、全ての回答が全文表示されます。