memocarilog

CSS3PIE でIE8以下でもボックスシャドウを適応させようと思ったのですが、実際使ってみるといろいろ戸惑う所がありました。その注意点と私の対処法です。

ボックスがグレーになってしまう

CSS3PIEのボックスシャドウは要素の下にシャドウを敷き詰めてシャドウを表現する仕組みになっていますので、敷き詰められてたシャドウの上にくるボックスの背景が透明だった場合に下記の画像のように下のシャドウが透けてしまいます。

その為シャドウの効果をつけたいボックスには背景色を指定する必要があります。

背景色を指定すると変な隙間ができる

今回やりたかったのは連続して並んでいるボックスにボックスシャドウをつけることです。
そして、シャドウをつけたかったボックスのまわりにborderを使っていました。
単純にbackground-color:#FFFFFF:と指定をしてみた所、下の画像のようにボックスの上のボーダーと背景の間に少し隙間が出来てしまいました。しかも、IE8にだけです。IE7では隙間無く問題なくボックスシャドウがかかりました。

そこで、background-colorではなくIE独自のfilter:progid:DXImageTransform.Microsoft.Gradient で背景色を変えてみようと思いました。その結果またしてもIE8でのみ並んでいるボックスのうち1つしか背景色が付いていないという現象が起こりました。
IE7では問題なく背景色がすべての要素に適応されていました。

苦肉の策としてIE8にだけborderではなくoutlineでborderっぽくしてみました。
outlineなら変な隙間ができませんでした！

しかしIE7にはoutlineが解釈されないので、IE7以下にはborderを適応するようにしました。
あまりスマートな解決法が見つからなかったです。もっとスマートに使いたいですねー。

その他の注意点

適応させたいボックスには、position:relative を指定しないとうまく動作しない事があるようです。
あとこれは、CSS3PIEを使う上での注意点になりますが、CSSファイルに記入するときのパスは、CSSファイルからみたパスではなくて、htmlファイルからみた場合のパスが必要になります。私は絶対パスで記入してちゃんと動作しました。

いろいろ設定には戸惑いましたが、IEでもきれいにボックスシャドウをかけてくれていたので、実務的に使用できそうかなーと思いました。