こんばんは、martinです。以前、IEでもCSS3のドロップシャドウ(text-shadowやbox-shadow)を使いたいということで、それを可能にするスクリプトを書きました 。
で、コメント で、IE7以下では、text-align:centerを指定すると影がすごくズレるというご指摘をいただきました(IE8では問題ない)。調べてみると、どうも「text-align:centerの指定が内包されるボックス要素にも適用されてしまう」という、懐かしいIEのバグが原因のようなので、それを修正しました。ついでに、画面のリサイズ(window.onresize)にも対応させました。以下のスクリーンショットのように、Firefox3.6など今時のブラウザに引けを取らない感じで、ボックスシャドウやテキストシャドウが可能になります。実際のデモのページはこちら。→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指定にも対応しています。
スクリプト自体はそんなに凝ってるわけではないのですが、あまり気合の入った指定をしなければ、それなりに動いてくれるかなと思います
1. kanonji — 2010/10/18@11:01:30
私のIE8だと適用されませんでした。
ちょっと理由に見当がつかないのですが、一応ご報告まで。
JavaScriptは動作しますし・・・ htcを無効にするような設定でもあったりするんでしょうか。
<script>google.load("jquery", "1");</script>
また、上記の様なhtml内部にJavaScriptを書いたscriptタグがあると、エラーが出てしまうようです。
if(relpath && relpath.indexOf('css3shadow.htc') !== -1){
14行目を上記の様にして対処してみました。