TopCSS > 「追記文章の折りたたみ 2.0」でIE7の不具合を解消する
News
各種ブログテンプレート
2007年4月19日

エントリー本文

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

Posted at April 19,2007 1:33 AM
Category:[CSS, 折りたたみ, 折りたたみ, 追記]
Tag:[, , ]

追記文章の折りたたみ 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 によって事象や対処が異なるかもしれません。

Posted by yujiro
この記事を読んだ人はこんな記事も読んでいます
関連記事
人気エントリー
Hatena Hot Entries
Hatena Entries
トラックバック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;」となります(全て半角文字)

Now loading...
Introduction
Entries of this Category
Recent Entries
Recent Comments
Recent Trackbacks
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

loading ...
Categories
Monthly Archives
BlogPeople
Now loading...
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 4.261
 
List Me!