IE8以下でもCSS3の一部機能を使える「PIE.htc」の落とし穴と解決法

結論から言うと、
「角丸、グラデーション、ドロップシャドゥとエフェクトを
重ねると効かない」ということらしいです。

CSS3はブラウザによって書き方が異なるので、
ウェブサービスのジェネレイターを使ったり、
エディタのプラグインとしてEmmetを使うことが多いです。

「CSS3プロパティジェネレーター」

たいてい、ジェネレイターは一括でドロップシャドゥや
角丸の設定が行えるので、CSS3だけでボタンを作るといった
作業に、とても便利です。
そこでソースを生成して、貼り付けると、IEだけ見えません…。

IE6~8にも、ドロップシャドゥ、グラデーション、角丸の
プロパティを有効にすることで有名な「PIE.htc」を使って、
該当のプロパティの最後に追加してもダメでした。

こういう時は、「極限まで小さく作って試す」というのを
経験上のセオリーとしていたので、
「角丸」だけ試してみようと思ったところ…。
下記のコードできちんと動きました。

.box {
    width: 120px;
    height: 80px;
    border: 1px solid #ccc;
    border-radius: 14px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    zoom: 1;
    behavior: url("/PIE.htc");
}

一気にグラデーション、角丸、ドロップシャドゥなどと
設定するのは、どういう訳か、無理があるようです
（ちなみに、試したのはIE8です）。

昔からちょくちょく使いたくなって、そのたびに
壁にぶつかっていたのですが、ようやく解決法が見つかりました。

最後に、分かりやすいマニュアルでいつもお世話になっている
西村 文宏さんの記事をご紹介します。
これから使おうと思っている方にオススメです。

「IE6～8でも一部のCSS3が使える！「CSS3 PIE」の使い方」