小粋空間  -  a cheap joke and a play on words site

Movable Type 4.2 テンプレートセット（コミュニティ用）修正

配布中の Movable Type 4.2 テンプレートセット（コミュニティ用）を修正致しました。

Movable Type テンプレート

修正したテンプレートは、下記のバージョンで配布しています。

• template_4_2_utf8_1_2_community_style_liquid.zip

ご利用の皆様にはご迷惑をおかけして申し訳ございませんが、以前のバージョンで本エントリーの不具合が発生している場合は、テンプレートのバージョンアップを行うか、３項の修正を行ってください。

今回の問題で改修するテンプレートは、「スタイルシート」インデックステンプレートのみです。

１．問題点

IE7 で表示すると、内側のボックスが外側のボックスの高さを越えて表示される（下記）。

２．原因

CSS2.0 の仕様で、float させている要素の高さが、回り込んだ要素の高さより大きい場合や、ボックス内の最後の要素を float 指定している場合、float させた要素が親ボックスからはみ出てしまいます。

IE7 以外のモダンブラウザは after 擬似要素を利用して、上記を回避する設定を行なってますが、IE7 は after 擬似要素に対応しておらず、上記の仕様にしたがった動作を行なうようになったため、このような不具合が発生しているようです（認識が誤まっていたらご指摘ください）。

３．対処内容

スタイルシートに下記の青色部分を追加してください。

.clearfix {
    display: inline-table;
    min-height: 1%;
}

調べると、下記の設定に修正することで解消するようですが、解消されなかったので上記の対処にしています（あまり調べきれてません）。

.clearfix {
    display: inline-block;
}

修正後の IE7 での表示は下記のようになります。