CSSレイアウト IEでclear指定された属性の上の空行

初めて質問をさせていただきますAFACTです。

現在、CSSレイアウトにてショッピングカートのデザインを行っているのですが、アイテムリストのwrapper divに float:left; を指定し横4列ずつアイテムをリスト表示しようとしています。

この時、1列ずつ横に整列させるために clear:both 設定を行ったdivを4アイテムごとに挿入していますが、IEではこのdivタグの上部に不要な空行（もしくはマージン）がレンダリングされてしまいます。

この空行もしくはマージン挿入をIEで回避する方法をどなたかご教示いただけませんでしょうか？

作成しているページは下記のアドレスからご覧いただけます。
http://new.affordablewebdesign.com.au/
Latest Products 内、product 4 と product 5 の間に下記のタグを挿入しています。

<div class="clearfloat"></div>
クラス"clearfloat"のCSS
.clearfloat{clear:both;border:#000 1px solid;}
（デバッグ用にボーダーを挿入しています）

お忙しい中恐縮ですが、皆様のお知恵をお貸しいただければと思います。
宜しくお願いいたします。

No.2 ベストアンサー 回答者： abril 回答日時： 2009/03/11 16:31

現状の様に、ただ前の要素の回り込みを解除する為だけに<div class="clearfloat"></div>といった空の要素を置くのはお奨めしません。

そのマークアップには論理的意味が何もないので。

【A】もしもitem_boxの高さが決め打ちできる・且つその高さを超えた場合にスクロールバーを表示させて良いのであれば、4アイテム毎にfloatを解除しなくても自動的に1行4アイテムにする事が可能。
【B】高さはアイテム毎に成り行き、item_boxの内容によって箱の高さがバラバラになっても良いが、スクロールバーは出したくない、というのであれば4アイテム毎に何らかの親要素で括って、その親要素に所謂clearfixを仕込む。

何れかの考え方になるかと思います。
また、空白ができるもう1つの原因として、item_box毎にformが親要素になっている為もあるかと。UAによってformの前後には初期状態で余白が生じる事があります。これは、formをインライン要素化する事などで回避できます。

下記に【A】【B】それぞれの場合のサンプルを示しました。
【A】
---------------------------------------------------------------------
【HTML】
---------------------------------------------------------------------
（省略）
<!--Product 1-->
<form name='cart' action='' method='post' class="form_productlist">
<div class="item_box">（省略：Product 1）</div>
</form>
<!--End: Product 1-->

<!--Product 2-->
<form name='cart' action='' method='post' class="form_productlist">
<div class="item_box">（省略：Product 2）</div>
</form>
<!--End: Product 2-->

<!--Product 3-->
<form name='cart' action='' method='post' class="form_productlist">
<div class="item_box">（省略：Product 3）</div>
</form>
<!--End: Product 3-->

<!--Product 4-->
<form name='cart' action='' method='post' class="form_productlist">
<div class="item_box">（省略：Product 4）</div>
</form>
<!--End: Product 4-->

<!--Product 5-->
<form name='cart' action='' method='post' class="form_productlist">
<div class="item_box">（省略：Product 5）</div>
</form>
<!--End: Product 5-->

<!--Product 6-->
<form name='cart' action='' method='post' class="form_productlist">
<div class="item_box">（省略：Product 6）</div>
</form>
<!--End: Product 6-->
（省略）
---------------------------------------------------------------------
【CSS】
---------------------------------------------------------------------
（省略）
.item_box {
float: left;
width: 25%;
padding-left: 0;
height: 200px;←追加。適切な値に調整を。
overflow: auto;←追加。
border-bottom: #000 1px solid;←追加。ただし、<div class="clearfloat"></div>で引いていた線をそのまま移行しただけなので、不要であれば削除。
}
（省略）
form.form_productlist {←追加。
display: inline;
}
（省略）
---------------------------------------------------------------------
【B】
---------------------------------------------------------------------
【HTML】
---------------------------------------------------------------------
（省略）
<ul class="products">
<!-- Product line -->
<li>
<!--Product 1-->
<form name='cart' action='' method='post' class="form_productlist">
<div class="item_box">（省略：Product 1）</div>
</form>
<!--End: Product 1-->

<!--Product 2-->
<form name='cart' action='' method='post' class="form_productlist">
<div class="item_box">（省略：Product 2）</div>
</form>
<!--End: Product 2-->

<!--Product 3-->
<form name='cart' action='' method='post' class="form_productlist">
<div class="item_box">（省略：Product 3）</div>
</form>
<!--End: Product 3-->

<!--Product 4-->
<form name='cart' action='' method='post' class="form_productlist">
<div class="item_box">（省略：Product 4）</div>
</form>
<!--End: Product 4-->
</li>
<!-- End: Product line -->

<!-- Product line -->
<li>
<!--Product 5-->
<form name='cart' action='' method='post' class="form_productlist">
<div class="item_box">（省略：Product 5）</div>
</form>
<!--End: Product 5-->

<!--Product 6-->
<form name='cart' action='' method='post' class="form_productlist">
<div class="item_box">（省略：Product 6）</div>
</form>
<!--End: Product 6-->
（省略）
</li>
<!-- End: Product line -->
</ul>
---------------------------------------------------------------------
【CSS】
---------------------------------------------------------------------
（省略）
ul.products {←追加。
list-style: none;
margin: 0;
padding: 0;
}
ul.products li {←追加。
zoom: 100%;
margin: 0;
padding: 0;
border-bottom: #000 1px solid;←この線も不要であれば削除。
}
ul.products li:after {←追加。
display: block;
clear: both;
height: 0;
visibility: hidden;
content: "";
}
.item_box{
（変更なし）
}
（省略）
form.form_productlist {←追加。
display: inline;
}
（省略）
---------------------------------------------------------------------

【B】は、4アイテム毎をくくる親要素として、ul liでマークアップしてみました。
どちらかと言えば、1アイテム毎もリストが相応しい様に思えますが、ひとまずは現在の質問者様のマークアップをできるだけ活かした方法で。
※欲を言えば、ちょっと何でもかんでもdivでマークアップし過ぎですので、もう少々論理構造から見直した方がベターかとは思います。

サンプルの表示結果がご希望に沿わない場合は、具体的に補足して下さい。

この回答へのお礼

ご回答、ありがとうございます。
おっしゃるとおり、Form属性のマージン取りが問題になっていたようです。ご教示いただきましたとおりinline 指定を行うことで、回避することができました。
またいただきました方法の中で、height指定・オートスクロールおよび1アイテムごとのliマークアップで対応いたしました。
今回は、テンプレート作成ということでできる限り多くの部分をCSSで独自に設定できるようにとマークアップを行ったのですが、ご指摘いただだいたように、特にプロダクトの名前や説明をPタグ等に置き換える等、div タグ指定を少々削ってみました。
ご丁寧にご教示いただき、本当にありがとうございました。

お礼日時：2009/03/12 09:23

No.1 回答者： ORUKA1951 回答日時： 2009/03/11 11:15

IEのfloat動作には、いくつかバグがあります。

回避する方法はありません。
また、固定サイズのブロックを４つ並べるのなら、clearを使わず、すべてfloatで並べたほうが良いですね。そうすると、ウィンドウサイズに関わらない、配置も出来ます。
画面が小さいと３つになっり４つになったり・・その方が望ましい。
　もしくは、floatを使わない。relativeで配置する。

この回答へのお礼

ご返答、誠にありがとうございます。
Clearを使わずに、という形も実は考えましたが、実は下記のサイトで同様にClearを入れているにもかかわらず、空白が出ない動作が確認されているのです。
http://sample.cart.fc2.com/?style=green
FC2のショッピングカートテンプレートなのですが、こちらでは空行やマージンがIE上でも入らずに表示されています。またこちらと同様のスタイルを試すことも行いましたが、どうしてもこの空白を回避することができませんでした。
IEのエラーは本当に難しいものですね(汗)

お礼日時：2009/03/11 15:53