「追記文章の折りたたみ 2.0」でIE7の不具合を解消する

「追記文章の折りたたみ 2.0」でIE7の不具合を解消する

Posted at April 19,2007 1:33 AM
Tag:[CSS, JavaScript, scriptaculous]

追記文章の折りたたみ 2.0」というカスタマイズで scriptaculous の Effect.BlindDown および Effect.BlindUp を利用していますが、「IE7.0では追記部分がずれて表示される」という情報を頂きました。また、折りたたみリンクにある実体参照していない文字「«」「»」の文字化けも同時に確認されていますので、このエントリーで解消方法を示します。

とりあえず IE7 をお持ちの方はサンプルの修正前後の折りたたみ動作をご確認ください。

追記文章の折りたたみ 2.0 サンプル(修正前)
追記文章の折りたたみ 2.0 サンプル(修正後)

ここでは Movable Type をサンプルにしていますが、FC2 ブログ版の「追記文章の折りたたみ 2.0 for FC2 ブログ」も同様の対処が必要と思われます。

1.表示がずれる不具合の解消

確認したところ、Effect する対象のオブジェクト(この場合は追記部分全体)を括る要素や親要素に margin が指定されている場合、IE7では margin 指定が無効になるケースがあるようです。

Movable Type のデフォルトテンプレートではこの事象が発生しなかったので、CSS の差分を確認したところ、公開テンプレートについては下記のように青色の width プロパティを設定することで回避できました(WindowsXP + IE7/Firefox2/Opera9 で確認しています)。XML宣言の有無は関係ありません。

/* エントリー */
.entry {
    width: auto;
    margin: 0 5px 15px;
    color: #36414d;
    background: #ffffff;
    font-size: 12px;
    line-height:150%;
    word-break: break-all;
}
.entry-content {
    width: 100%;
}

注:.entrywidth プロパティに 100% を与えると他の不具合が生じます。

2.文字化けの解消

折りたたみリンクにある「«」や「»」は実体参照しないと IE7 では文字化けが発生します。それぞれ「«」および「»」に修正してください。

以上です。
なおすべてのケースを調査している訳ではないので、適用しているテンプレートの CSS によって事象や対処が異なるかもしれません。

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


コメント

yujiro様
この件の不具合の報告をさせていただいたものですが、
早速の対応ありがとうございました。
おかげさまで不具合を解消することが出来ました。
ただただ感謝です。
これかもお参考にさせていただきます!!

[1] Posted by tetsu : April 21, 2007 7:18 PM

>tetsuさん
こんばんは。
ご連絡ありがとうございました。
こちらこそ色々勉強になりました。
ではでは!

[2] Posted by yujiro : April 24, 2007 6:21 PM
コメントする
greeting

*必須

*必須(非表示)


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

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

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

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