[IE]IE6、IE7、IE8で角丸やドロップシャドウなどを利用できるIE-CSS3.htc

以前に紹介させていただいた PIE.htcファイルと同様、IE6、IE7、IE8 でも CSS3 のプロパティを利用できるファイルが「IE-CSS3.htc」です。

PIE.htcと基本的な使い方は同じですが、利用できるプロパティが若干変わってきます。

IE-CSS3.htc で利用できるプロパティ

IE-CSS3.htcを使うことで、以下の CSS3 プロパティがIE下位バージョンでも利用できるようになります。
※PIE.htcとの違いは、グラデーションが利用できない分、text-shadow を利用できるというイメージです。

IE-CSS3.htc のダウンロード

以下のページより ie-css3.htcのファイルをダウンロードします。

IE-CSS3.htc の使い方

「角丸の border-radius」と組み合わせた例です。

PIE.htcの時と同様、IEのビヘイビア 機能を利用して HTC ファイルをHTML 上で使用できるようにします。

.box    {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
     
    /*PIE.htc を利用*/
	behavior:url("./ie-css3.htc");
}

IE-CSS3.htc のサンプル

以下のページに、IE-CSS3.htcを利用した「角丸」「ドロップシャドウ」「テキストシャドウ」のサンプルを掲載しています。
IE-CSS3.htc のデモ

IE-CSS3.htc の注意点

IETester でしか検証していませんが、IE-CSS3.htcを実際に使ってみると一筋縄ではいかないコトがちょこちょこ出てきます。

border-radius などが、IE8で 正常に表示されない場合

これは全体のレイアウトにも依りますので何とも言えませんが、IE8 でどうしても角丸がズレて表示される…なんて場合は、behavior を使う要素で position:relative と合わせて z-index:1 を付けると上手くいく場合があります。

.box    {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
     
    /*PIE.htc を利用*/
    position:relative;
    z-index:1;
	behavior:url("./ie-css3.htc");
}

あと、過去の経験上、css3-mediaqueries.js を使っていると何故かレイアウトが崩れる模様…。

IE6 で正常に動かない場合

これも過去の経験から、IE6 用に minmax-1.0.js ファイルを読み込み、
CSSファイル上で min-width、max-width を使っている場合に、レイアウトがおかしくなる場合もあります。

ドロップシャドウの色が変更でない

IE-CSS3.htcでは、box-shadow のプロパティは使えるものの、ドロップシャドウ（影）の色を変更できなかったり、ぼかし具合を調整できない…などの問題もあります。

影の色は何を指定しても「黒色」です。

ぼかし具合については、.htcファイル自体を編集して透明度を編集する方法もあるみたい…ですが、部分的に透明度を調整はできません。

テキストシャドウがIE6 だと上手く調整できない

これは当ブログのデザインにも原因があるのだと思いますが、以下のデモページをIE6（IETester）で見ても、text-shadow が上手く効いてくれません。

IE-CSS3.htc のデモ