※ ChatGPTを利用し、要約された質問です（原文：CSSでfloat指定した画像に隙間）
CSSでfloat指定した画像に隙間
このQ&Aのポイント
floatの指定をすると並べた画像に隙間ができます。
画像をfloatさせなければ隙間は出ないのですが、下記cssのようにfloatさせると幅400pxにIEだけ収まりません。
WinXP・irefox1.0やOpera7.5では意図通り表示されます。どなたか解決策お持ちの方よろしくおねがいします。
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>
お礼
あ！恥ずかしい・・・。ulの間違いです。 htmlの一行目でDOCTYPEの宣言をすればいいんですよね？でも、それだと一行目にXML宣言を入れるという大前提が・・・。 W3Cに則った形では互換モードになって、それを潰すためにハック技を駆使するか、 W3Cのフォーマットを無視して標準モードを取らせるかっていう所なんでしょうか？ しかし、バグってこんなにあるんですね・・・。 参考にさせていただきます。
補足
検索で何とか回答にありつきました。 IEのバグを利用して、 IEだけに下記のcssを読ませればなんとかなりました。 * html img { margin: 0 -3px; } ありがとうございました。