下記のように記述すると問題なく動作するのですが、「サンプル」の部分を「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>
なぜこのような現状が起こるのでしょうか?
ご存じの方がおられましたらご回答をよろしくおねがいします。
No.3
- 回答日時:
float:rightが無効になっているわけではなく、連続した半角英字は一単語として処理されるので折り返されないだけでしょう。
word-break: break-all;
でいいかと。
IEならこれで問題を解決することができるのですが
word-breakプロパティは、IEが独自に採用したものなので
IE以外だと使用できないという問題があります。
W3Cが標準仕様を定めて各ブラウザがそれぞれ採用してくれれば
このような問題は起きないのですが・・・
ご回答いただきどうもありがとうございました。
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.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;">
<!-- 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?m …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
bodyにidをつける理由は何ですか?
-
(Javascript)印刷するファイル...
-
"mailtoでメールの【氏名】【性...
-
ハイパーリンクに下線を表示す...
-
テキストボックス内にハイパー...
-
HP URLが変更に伴う自動ジャン...
-
Windowサイズにより赤枠の大き...
-
WEB上で編集できない、スク...
-
javaScript Nullまたはオブジェ...
-
<a href="#" …>の意味を教えて...
-
ウィンドウ名の設定
-
SCRIPT5007: 未定義または NULL...
-
URLを引数とし、フレーム間で渡...
-
JavaScriptでのEnterキーとAlt+...
-
JAVAでリンクボタンを作成して...
-
Vbscriptで自分自身のウィンド...
-
外部ファイル名を変数で指定で...
-
子画面で画像を表示したい
-
JavascriptとJqueryを混在し記述
-
window.onloadイベントの任意実...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
bodyにidをつける理由は何ですか?
-
テキストボックス内にハイパー...
-
ハイパーリンクに下線を表示す...
-
(Javascript)印刷するファイル...
-
<body id=~>の用途は?
-
"mailtoでメールの【氏名】【性...
-
HTML文でiframe srcで参照表示...
-
javaScript Nullまたはオブジェ...
-
bodyにwidth:100%をつける理由は?
-
複数のiframeの読み込みについて
-
横スクロールを右から左へ・・・
-
Chromeがiframe内の「#~」に釣...
-
別ページのページ内リンクでの...
-
javaに詳しい方、教えてください
-
ページによって表示位置がずれ...
-
背景が流れる(スクロールする...
-
iframeのsrcにページ内リンク(...
-
googleモバイルがiframeで表示...
-
HP URLが変更に伴う自動ジャン...
-
h1にmarginを指定すると一瞬カ...
おすすめ情報