TopMovable Typeカスタマイズ折りたたみ追記 > 2007年4月
2007年4月19日

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

April 19,2007 1:33 AM
Tag:[, , ]
Permalink

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

Comments [2] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

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


AMN
Categories
Monthly Archives
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3