ブラウザによって違う画像の下の行間を統一したい

質問

独学の(X)HTML、CSSで個人でサイトを作っています。

普段はMacでSafariを使っています。
完成したものをいろんなブラウザで確認しようと思い、Firefoxを落として見てみたところ、
画像(<img～>)の下の改行(<br>)が、Firefoxだと倍くらいの幅になってしまっています。

サイトのデザイン上、スクロールバーを出さない設定のボックスを使っているのですが
今のままだとボックスからはみ出た部分はその下のボックスに消されてしまっています。

解決方法はありますでしょうか。

ちなみにWinのIE6やLunascape確認したところ、問題はありませんでした。

いろいろ調べてみましたが、私の力不足で解決方法が見つからなかったので質問しました。
ご回答よろしくお願いします。

回答No.1

ORUKA1951

あくまで、あなたのパソコンであなただけが閲覧するとしてお答えします。ネットで公開していろいろな人に見てもらうという条件はなし。

　<br>はXHTMLでは、<br />ですが、基本的に<br>や<br />は使いません。これはひとつの段落で強制的に改行させるlineBrakeのマークアップです。
　きちんと段落ブロックで分けてマージンをきちんと設定することで解決できます。

　なお、HTMLは、視覚障害者が文字を大きくしても、また小さなディスプレイで見ても情報が伝わることを目的に作られたものですから、
＞サイトのデザイン上、スクロールバーを出さない設定のボックスを使っている
　は、本当は根本的な間違いですよ。PDFにして配布するのがベストです。

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より