- ベストアンサー
IEとFirefoxでの表示の違い
- 質問者はCSSを使用してテーブルを作成し、画像と文章を並べて表示したいが、IEとFirefoxで表示が異なる問題に直面している。
- 外部スタイルシートにwidth、float、border、padding、marginを指定しているが、表示が重なってしまう。
- IEではheight:100%を指定すると画像の高さまで枠が広がるが、Firefoxでは変化しない。高さを特に指定せずに両方のブラウザで同じ表示をする方法を知りたい。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
No.1です。 すみません、HTML部分のコードが間違っておりました。 下記に訂正いたします。 HTML ================================================== <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <link rel="stylesheet" href="style.css" type="text/css" /> <title>test</title> </head> <body> <div class="box"> <h4>title</h4> <!-- 左寄せする部分/ --> <div class="img"> <img src="img1.gif" width="200" height="400" alt="img" /></div> <!-- /左寄せする部分 --> <!-- 右に回りこむ部分/ --> text text text text text text<br /> <!-- /右に回りこむ部分 --> <!-- 回り込み解除部分/ --> <div class="clear"></div> ←コレを追加してください <!-- /回り込み解除部分 --> </div> <div class="box"> <h4>title</h4> <div class="img"><img src="img1.gif" width="200" height="400" alt="img" /></div> text text text text text text<br /> </div> </body> </html>
その他の回答 (1)
- gonagona
- ベストアンサー率80% (12/15)
こんにちは。 恐らくfloatを解除していないので、ブラウザがずっと回り込みしてると解釈して、 高さが反映されてないんだと思います。 回り込みを解除させたい場所にclearを指定すれば大丈夫です。 CSS ================================================== body {width:600px;} .img{float:left;} div.box { border: 1px solid #000 ; padding:10px; margin:10px; } .clear {clear:both;} ←コレを追加してください HTML ================================================== <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <link rel="stylesheet" href="style.css" type="text/css" /> <title>test</title> </head> <body> <div class="box"> <h4>title</h4> <!-- 左寄せする部分/ --> <div class="img"> <img src="img1.gif" width="200" height="400" alt="img" /></div> <!-- /左寄せする部分 --> <!-- 右に回りこむ部分/ --> text text text text text text<br /> <!-- /右に回りこむ部分 --> <!-- 回り込み解除部分/ --> <div style="clear:left;"></div> ←コレを追加してください <!-- /回り込み解除部分 --> </div> <div class="box"> <h4>title</h4> <div class="img"><img src="img1.gif" width="200" height="400" alt="img" /></div> text text text text text text<br /> </div> </body> </html>
お礼
教えていただいた方法で解決できました。 たいへん参考になりました。 ありがとうございました。