こんばんは、martinです。以前、IEでもCSS3のドロップシャドウ(text-shadowやbox-shadow)を使いたいということで、それを可能にするスクリプトを書きました 。
![外部リンク Link](theme/basic/Images/external-link.png)
![ファイル名: Firefox3.6.jpg
ファイルサイズ: 110.8KB
→クリックで元のサイズを表示 Firefox3](PIX/s2/1280874963_Firefox3.6.jpg)
![ファイル名: IE7-compatible.jpg
ファイルサイズ: 107.9KB
→クリックで元のサイズを表示 IE7-compatible](PIX/s2/1280874963_IE7-compatible.jpg)
実際のデモのページはこちら。→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指定にも対応しています。
![ファイル名: Box-shadow-inset.jpg
ファイルサイズ: 74.6KB
→クリックで元のサイズを表示 Box-shadow-inset](PIX/s2/1280874963_Box-shadow-inset.jpg)
スクリプト自体はそんなに凝ってるわけではないのですが、あまり気合の入った指定をしなければ、それなりに動いてくれるかなと思います
私のIE8だと適用されませんでした。
ちょっと理由に見当がつかないのですが、一応ご報告まで。
JavaScriptは動作しますし・・・ htcを無効にするような設定でもあったりするんでしょうか。
<script>google.load("jquery", "1");</script>
また、上記の様なhtml内部にJavaScriptを書いたscriptタグがあると、エラーが出てしまうようです。
if(relpath && relpath.indexOf('css3shadow.htc') !== -1){
14行目を上記の様にして対処してみました。