- ベストアンサー
CSSで表示が、、、
写真を並べているページなのですが、 firefox と IE での縦のスペースの空き具合が異なってしまいます。 IEで見ると、firefoxよりも大きく立て幅が空いてしまい 揃ってくれません。 回避策をググって色々試してみたのですが 上手くいきませんorz ひょっとしたらコード的にどこかおかしいのかも しれないのですが、、、どなたか助言をお願いしますm(_ _)m -- html-- <div class="navi" > <div class="pic2"><a href="01.html"><img src="pic/1mini.jpg" width="200" height="150" border="0" /></a></div> <div class="pic2"><a href="02.html"><img src="pic/2mini.jpg" width="200" height="150" border="0" /></a></div> <div class="pic2"><a href="03.html"><img src="pic/3mini.jpg" width="200" height="147" border="0" /></a></div> <div class="pic2"><a href="04.html"><img src="pic/4mini.jpg" width="200" height="151" border="0" /></a></div> </div><!--navi--> -- 外部CSS -- .pic2 { float: left; margin-left:30px; margin-top:20px; } .navi { clear:both; margin-top:40px; }
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
.pic2 { float: left; margin-left:30px; margin-top:20px; } IE以外で同じようになるように正しく表示させます。 IEだけに読み込ませたい数値を、下に_を入れて書きます。 .pic2 { float: left; margin-left:30px; _margin-left:80px; margin-top:20px; _margin-top:80px; } この場合は IE がおかしいので、正しく書き IE だけに適応させるものをその下に書いてください。 こういうノウハウ（回避策）をハックといいます。ハックをキーワードに調べられると、さまざまなソフト・バージョン違いのさまざまな当てはめ方を知ることができますよ。よくないやり方ですが、仕方なしですよね。 参考URLはボックスの解釈の仕方の解説です。
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
あまり気にしたことなかったですが、たしかにそのようですね。 http://cssbug.at.infoseek.co.jp/detail/winie/b107.html floatとmarginの併用によるバグ（解釈の違い？）のよう なので、当座めんどうでも、2重にdivをかぶせてみては いかがでしょうか？ <style type="text/css"> .pic2{ margin:20px 0px 0px 30px; } .pic2float{ float:left; } .navi{ clear:both; margin-top:40px; } </style> </head> <body> <div class="navi"> <div class="pic2float"><div class="pic2"><a href="01.html"><img src="pic/1mini.jpg" width="200" height="150" border="0" /></a></div></div> <div class="pic2float"><div class="pic2"><a href="02.html"><img src="pic/2mini.jpg" width="200" height="150" border="0" /></a></div></div> <div class="pic2float"><div class="pic2"><a href="03.html"><img src="pic/3mini.jpg" width="200" height="147" border="0" /></a></div></div> <div class="pic2float"><div class="pic2"><a href="04.html"><img src="pic/4mini.jpg" width="200" height="151" border="0" /></a></div></div> </div>
お礼
試してみましたが、 どうも空きが出来てしまうみたいです。 参考URLありがとうございます。
お礼
ありがとうございます。 色々試してみようと思います。