みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

CSSでfloat指定した画像に隙間

floatの指定をすると並べた画像に隙間ができます。

div aで外を囲み、幅を400px固定し、
その中にli(幅200px)を放り込んでいます。
(幅400pxの入れ物に200pxの小箱を2列に並べていく)

画像をfloatさせなければ隙間は出ないのですが、下記cssのようにfloatさせると幅400pxにIEだけ収まりません。

WinXP・irefox1.0やOpera7.5では意図通り表示されます。。
どなたか解決策お持ちの方よろしくおねがいします。


<html>
<head>
<title></title>
<style type="text/css">
<!--
#a{
width:400px;
margin: 0 auto;
padding:0;
}

li{
width:200px;
padding:0;
list-style:none;
float:right;
display: inline;
}

img{
border:none;
margin:0;
padding:0;
vertical-align:top;
float:left; ←これの有無で不具合
}
-->
</style>
</head>
<body>
<div id="a">
<dl>
<li>
<img src="xxx.jpg" width="150" height="200" /><img src="xxx.jpg" width="50" height="100" /><img src="xxx.jpg" width="50" height="100" /></li>
<li>
<img src="xxx.jpg" width="150" height="200" /><img src="xxx.jpg" width="50" height="200" /></li>
</dl>

</body>
</html>

投稿日時 - 2005-01-28 11:46:56

QNo.1189748

困ってます

質問者が選んだベストアンサー

原因はわからないんですが、対処としては標準モードで動作するようすれば直るようです。
# IEのリストのスタイルシートはバグだらけ・・わけわかんねー。

あと、リストがDLになっていますがULの間違いでは?

参考URL:http://members.at.infoseek.co.jp/cssbug/detail/winie.html

投稿日時 - 2005-01-28 12:51:28

補足

検索で何とか回答にありつきました。

IEのバグを利用して、
IEだけに下記のcssを読ませればなんとかなりました。

* html img {
margin: 0 -3px;
}

ありがとうございました。

投稿日時 - 2005-01-28 15:11:51

お礼

あ!恥ずかしい・・・。ulの間違いです。

htmlの一行目でDOCTYPEの宣言をすればいいんですよね?でも、それだと一行目にXML宣言を入れるという大前提が・・・。

W3Cに則った形では互換モードになって、それを潰すためにハック技を駆使するか、
W3Cのフォーマットを無視して標準モードを取らせるかっていう所なんでしょうか?

しかし、バグってこんなにあるんですね・・・。
参考にさせていただきます。

投稿日時 - 2005-01-28 13:22:52

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問