IE7でclearfixが効かない？

質問

winXP環境、xhtml+cssでwebページを作成していますが、壁にぶち当たっています。

親ボックスの中に２つの子ボックスをfloatでレイアウト、というよくあるパターンですが、親ボックスにclearfixを指定しているのにIE7で表示すると、floatさせたdivが親ボックスからはみ出した状態で表示されます。
Firefox3/IE6/IE8で表示確認すると問題なく表示されます。

■htmlソース
http://bangn.web.fc2.com/testpage.html
■CSSソース
http://bangn.web.fc2.com/css/default.css（デフォルトスタイルリセット用）
http://bangn.web.fc2.com/css/base.css（divレイアウト、clearfix）
http://bangn.web.fc2.com/css/kakunin.css（レイアウト確認用に各divのborderを黒くしたもの）

htmlの書き方がおかしいのか？clearfixの記述がおかしいのか？とソースを何度も見直ししましたが、解決に至らず困っております。
どなたかアドバイスをいただけないでしょうか？

よろしくお願いいたします。

回答No.2

kuzumiHK · ベストアンサー

これが原因ですね。

/* for IE6 and below */
*html
.clearfix,
#mainPanel,
#contentPanel {
height: 1px;
/*\*//*/
height: auto;
overflow: hidden;
/**/
}

縦幅を1pxにしないといけないのは、
.clearfixを単体で使用したい場合だけな気がします。
（それもあまりよい使い方とはいえませんが。。）
#mainPanelや#contentPanelの縦幅を1pxにしないといけない理由がなければ、

/* for IE6 and below */
.clearfix{
height: 1px;
}

としたほうがよさそうです。
なにか問題が起こるようでしたら、
IE7ハックや条件付コメントでIE7のみheightをautoにしてみてはいかがでしょう。

*:first-child+html #mainPanel,
*:first-child+html #contentPanel {
height:auto;
}

お礼

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

おかげさまで、ご教示いただいた方法で無事解決できました。

回答No.1

salonpath

.clearfix,
#mainPanel,
#contentPanel {
display: block;
}
inlineblockをいきなりblockで上書きしてるけどこれ必要ですか？
あと関係ないけど
/* for IE6 and below */
の* htmlが.clearfixにしかついてないのおかしくないですか？

お礼

早速のご回答、ありがとうございました。

> /* for IE6 and below */
> の* htmlが.clearfixにしかついてないのおかしくないですか？

ご指摘のとおりです。
第３者の目で見ていただいてやっと凡ミスに気づことができました。

補足

> inlineblockをいきなりblockで上書きしてるけどこれ必要ですか？

display: inline-block; だけですと
Firefoxでレイアウトが崩れる為、そちら方面の対策にしてます。

参考ページ：「inline-blockの奇妙な世界」
http://norisfactory.com/stylesheetlab/000039.php