THE HAM MEDIA BLOG

先日書いた「jQueryの勉強：自作関数？」
これを読み返していて、プレビューを実行。
そこでなぜか違和感を感じる動作をしていることに気づく。
「あれ？コレの実行って文字が大きくなってから
　指定の大きさになるんだっけ？」

いやいやいや、そんな指定はしていない。
小さい文字から大きくなるアニメーションのはずだ。

作ったときはFirefoxでプレビューしていたから気づかなかったけど、
どうやらIE6で見たときに違う動作をするようだ。

一体なぜ！？

原因を探ってみることにした。

問題の動作が起きたスクリプト

$("div.prev01").animate({fontSize: "5em"},1000 );

これのどこに問題があるのかわからなかったので、
いろいろ変化させてみたところ、
どうやらfontSizeのところでの指定の仕方にあるということがわかった。
emを指定しているとIE6のときに大きくなてから指定の値になるという動作を起こす。
％に変えてみたところ他のブラウザと同じ動作をしました。

下にプレビューを書いておくので、
IE6と他のブラウザで動作をみてください。

プレビュー

下記のプレビュー、IE6だと上の方の動作が違います。
上が文字が4emにアニメーションするもの、
中が文字が400%にアニメーションするもので、
下が文字が48pxにアニメーションするものです。

動作プレビュー

ちなみにIE7は未確認なのでどうなるのか不明です。
Firefox3とOpera9.5、Google Chromeだとどれも同じで
小さい文字から大きい文字へと変化します。

IE6だと、真ん中の％を指定したものだけ
小さいのから大きい文字に変化しますが、
上下の二つは動作させると大きい文字から小さい文字へと動くようです。

つまり％の指定なら問題なく動作するのでしょうけど、
emとかpx指定だとおかしなどうさをするということ。

これはなぜ！？
それと、ピクセル指定の方がem指定よりも
最初に見える文字の大きさがハンパないように思えるが･･･

とりあえずは％で対応するようにしたほうが無難かもしれない。

どなたかIE7で見たときの動作とかも教えていただけたらうれしいです。