• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

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

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

IE-CSS3.htc を使うことで、以下の CSS3 プロパティがIE下位バージョンでも利用できるようになります。
・border-radius
・box-shadow
・text-shadow
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-widthmax-width を使っている場合に、レイアウトがおかしくなる場合もあります。


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

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

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

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


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

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

IE-CSS3.htc のデモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す