- ベストアンサー
画像の表示（FirefoxとSafari）
こんにちは。 ２つの画像を縦にくっつけようとしているのですが、IEでは隙間なくきっちりとつくのですが、FirefoxとSafariでは隙間ができてしまいます。 この2つの画像のmarginは接する部分では0pxとしています。 対処方法をご存知の方、どうぞよろしくお願いします。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
そうなるのが、本来です。IEがおかしい。 <div class="main" style="line-height:0px;width:650px"> <img src="walking1.1.jpg" width="580" height="460" alt="ウォーキング" style="border:0; margin:10px 0px 0px 40px;"><br> <img src="walking1.2.jpg" width="580" height="640" alt="ウォーキング" style="border:0; margin:0px 0px 0px 40px;"><br> </div> なお、<br>は無くても同じ、ただし無いとスタイルシートを解除するとディスプレイが幅広いと横に並ぶ。
その他の回答 (1)
DOCTYPEとソースコードを示して下さい。
補足
問題の画像につきましてはCSSでの記述はありません。 以下にHTMLを載せておきます。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html ; charset=Shift_JIS"> <title>方法１（やさしいダイエット法）</title> <link rel="stylesheet" type="text/css" href="test-css.css"> <style type="text/css"> </style> </head> <body> <div class="title"> <h1><a href="index.html">やさしいダイエット法</a></h1> <h2>誰でも簡単にできるダイエット法を紹介しています。</h2> </div> <div class="menu"> <p class="category">Ｍｅｎｕ</p> <ul> <li><a href="1.html">方法1</a></li> <li><a href="2.html">方法2</a></li> <li><a href="3.html">方法3</a></li> <li><a href="4.html">方法4</a></li> <li><a href="5.html">方法5</a></li> </ul> </div> <div class="main"> <img src="walking1.1.jpg" width="580" height="460" alt="ウォーキング" style="border:0; margin:10px 0px 0px 40px;"><br> <img src="walking1.2.jpg" width="580" height="640" alt="ウォーキング" style="border:0; margin:0px 0px 0px 40px;"><br> </div> </body> </html>
お礼
ご回答いただきありがとうございます。 >そうなるのが、本来です。IEがおかしい。 そうなんですか？逆だと思っていました。 いただいたアドバイスの方法で、画像と画像の間の隙間が解消しました。 全体的にFirefoxとSafariではIEに比べて余白が多いです。 例えば、menuにリスト（ul）を使っていますが、左の余白がこの2つのブラウザではかなり大きくなってしまって困っています。