誰でも簡単に IE で CSS3 を使える様にする方法を分かりやすく書いておきました

以下のサイトで紹介されている方法で IE シリーズで CSS3 を使えるようにできます。使い方の要点を抑えて紹介します。

• CSS3 support in Internet Explorer 6, 7, and 8

この方法で以下のプロパティが仕様可能になります。

• border-radius
• box-shadow
• text-shadow

ダウンロード

必要なファイルは ie-css3.htc のみとなります。このファイルを以下よりダウンロードします。

• CSS3 support in Internet Explorer 6, 7, and 8

使い方

CSS3 を使いつつ以下のようにダウンロードしてきたファイルを読み込むと IE シリーズで CSS3 が適用されるようになります。角丸などが使えるようになるはずです。

1
2
3
4

.hoge {
    border-radius: 10px;
    behavior: url(/wp-content/themes/hoge/scripts/ie-css3.htc);
}

ただ、ここがポイントです。

You would expect URLs in behavior: url(…) to be relative to the current directory as they are in a background-image: url(…) style for example, but instead Microsoft decided to ignore standards here and make them relative to the docroot instead. So behavior: url(ie-css3.htc) should work if ie-css3.htc is in the root directory of the site.

英語が苦手な人のために、私のおかしな日本語訳を掲載します。

あなたは behavior: url(…) の中の URL が、例えば background-image: url(…) のスタイルがそうであることから、カレントディレクトリの相対であると期待するかもしれませんが、代わりに Microsoft はここの標準を無視することに決めて、代わりにドキュメントルートからの相対にしました。もし ie-css3.htc がサイトのルートディレクトリになっている場合、そうです behavior: url(ie-css3.htc) になるはずです。

なので、WordPress のテーマファイル内に含めたりする場合は CSS ファイルには絶対パス等で記入しておくと上手く動作すると思います。ここを抑えておかないと、いつまで経っても角丸が使えなくて困ってしまいます。気をつけましょう。

角丸だけ対応する

似たようなもので角丸だけ対応するものもあります。角丸だけを使いたい場合はこちらを利用してみましょう。

curved-corner – CSS curved corner – Google Project Hosting