- ベストアンサー
日本語を半角英数字にすると画像にCSSのfloat:rightを指定していても無効になる問題について。
下記のように記述すると問題なく動作するのですが、「サンプル」の部分を「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）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
#1だ。 「これ」じゃわかるわけないな。 8月14日「URLの折り返し問題はGecko(Firefox)のバグなのか?」 と 8月17日 「Re: firefoxのurlライン・ブレーク問題」 です。id属性が振られてないので個々にアクセスしづらい(汗
その他の回答 (2)
- talepanda
- ベストアンサー率58% (45/77)
float:rightが無効になっているわけではなく、連続した半角英字は一単語として処理されるので折り返されないだけでしょう。 word-break: break-all; でいいかと。
お礼
IEならこれで問題を解決することができるのですが word-breakプロパティは、IEが独自に採用したものなので IE以外だと使用できないという問題があります。 W3Cが標準仕様を定めて各ブラウザがそれぞれ採用してくれれば このような問題は起きないのですが・・・ ご回答いただきどうもありがとうございました。
はっきりとはわからないし考えるの面倒くさいので 質問者様と後の回答者に丸投げします 参考になるかもしれないので。 おっしゃる現象自体かは判りませんが、 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;"> <!-- samplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesample --> 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
お礼
リンク先の内容を読ませていただきました。 レイアウト時における文字列折り返しに標準仕様が無いのであれば 独自仕様のあるIEなどを除けば解決方法はないようですね。 ご回答いただきどうもありがとうございました。