0

これはFAQに違いないと思いますが、まだ答えが見つかりません.

HTML ページにテキストを含む小さな画像が表示されます。画像はそれに続く単語にとどまる必要がありますが、2 つの 間に を使用したり、2 つを直接並べたりしても、Firefox は間に改行を入れることがあります。

それが違いを生むのであれば、 が要素<img>のコンテンツとしてラップされていることも告白する必要があります。<a>

編集 - 問題を示すテスト ファイルを次に示します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
&middot; <a href="example.com"; onmouseover="return true"><img height="9" width="9" src="logo-break.gif" alt="pic" /></a>2UXX&nbsp;B:308-375
&middot; <a href="example.com"; onmouseover="return true"><img height="9" width="9" src="logo-break.gif" alt="pic" /></a>2V1D&nbsp;B:308-375
</body>
</html>

そのページを表示して、ブラウザをゆっくりと狭くしていくと、2枚目の画像で改行してしまいます。関連するcssはありません。

edit2 - http://jsfiddle.net/487R7/に簡素化された例を投稿しました。 そのバージョンには<a>要素がまったくなく、&nbsp;エンティティが含まれています。結果ボックスの幅を調整して、症状を確認します。

4

2 に答える 2

0

OK、うまくいくと思われる解決策は、<span>一緒に保つ必要がある画像とテキストの周りに配置し、スパンにCSSを設定して次のように言うことです:white-space:nowrap;

于 2013-05-02T13:39:03.137 に答える
0 
<html>
<head><style>.container { width: 400px; }</style></head>
<body>
<div class="container">
<img src="http://lipsum.com/images/lipsum07.gif" style="float: right;" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur velit velit, cursus vitae consequat a, facilisis eu elit. In quis elit non enim semper dictum eget sagittis velit. Mauris nec lectus vitae mi faucibus rutrum non et nunc. Vestibulum ultrices suscipit blandit. Praesent faucibus sagittis arcu, nec convallis dui sodales sit amet. Aenean sapien metus, vestibulum a lacinia id, rhoncus vitae tellus. Fusce enim tortor, suscipit eu tincidunt eu, accumsan eu nulla. Nulla porttitor ullamcorper suscipit. Maecenas vel consectetur ipsum. Mauris blandit sapien et nulla ultrices a consequat nisi sagittis.</p>
</div>
</body>
</html>
于 2013-05-01T16:22:31.800 に答える