CSS3PIE を使用してIE8以下にボックスシャドウを適応する時の注意点

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なら変な隙間ができませんでした!
outlineでborderっぽくしてみた
しかしIE7にはoutlineが解釈されないので、IE7以下にはborderを適応するようにしました。
あまりスマートな解決法が見つからなかったです。もっとスマートに使いたいですねー。

その他の注意点

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

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

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ jQueryプラグイン 素材 引っ越し php お知らせ Facebook JavaScript CSS カテゴリー IE 投稿タイプ seo Photoshop Shareボタン HTML5 レスポンシブ サイドバー ナビゲーション タクソノミー WPセキュリティ Git カスタムメニュー Macアプリ PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能