こんばんは、martinです。以前、IEでもCSS3のドロップシャドウ（text-shadowやbox-shadow）を使いたいということで、それを可能にするスクリプトを書きました
。
で、IE7以下では、text-align:centerを指定すると影がすごくズレるというご指摘をいただきました（IE8では問題ない）。調べてみると、どうも「text-align:centerの指定が内包されるボックス要素にも適用されてしまう」という、懐かしいIEのバグが原因のようなので、それを修正しました。ついでに、画面のリサイズ（window.onresize）にも対応させました。以下のスクリーンショットのように、Firefox3.6など今時のブラウザに引けを取らない感じで、ボックスシャドウやテキストシャドウが可能になります。
Firefox3.6でのスクリーンショット。ChromeやOperaでもほぼ同じ。
IE8で、後方互換モード（IE7相当）表示。遜色ないレベルで再現。
実際のデモのページはこちら。→http://p2b.jp/demo/CSS3dropshadow.html
使い方は簡単で、CSS3なページのHEAD要素内に、IE（IE9未満）だけ読み込むような外部JavaScript（実態はHTCファイル）を記述するだけです。最新版を添付しておきますね。
<!--[if lt IE 9]> <script type="text/javascript" src="path/to/css3shadow.htc"></script> <![endif]-->
デモページにもありますが、box-shadowのinset（内側ドロップシャドウ）や複数のtext-shadow指定にも対応しています。
IE7互換モードでの表示。まぁ悪くない。
スクリプト自体はそんなに凝ってるわけではないのですが、あまり気合の入った指定をしなければ、それなりに動いてくれるかなと思います 
Comments