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

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

Posted at May 11,2009 1:21 AM
Tag:[MovableType, Template, TemplateSet]

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

Movable Type テンプレート

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

  • template_4_2_utf8_1_2_community_style_liquid.zip

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

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

1.問題点

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

2.原因

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

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

3.対処内容

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

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

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

.clearfix {
    display: inline-block;
}

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

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)