IEでもCSS3を効かせる
ただし以下の２つの指定に限ります。
-
- border-radius
- box-shadow
-
- (opacity)もできました。他にもあるかもしれません。
準備と使い方
1.必要なファイルのダウンロード
まず以下のサイトから「ie-css3.htc」なるものをダウンロードする。
※ダウンロードリンクは下記サイトの左上にあります。
2.CSSに一行追加する
次に、CSS3の指定があるセレクタに対して、「behavior: url(ie-css3.htc);」と追加する。
例)
.box { -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; -moz-box-shadow: 10px 10px 20px #000; -webkit-box-shadow: 10px 10px 20px #000; box-shadow: 10px 10px 20px #000; behavior: url(ie-css3.htc); ￣￣￣￣￣￣￣￣￣￣￣￣￣￣ }
これでひとまず完了です。
簡単ですね。
ただし、様々な不具合を内包しているそうで...
次の項からその対策を少し紹介します。
不具合対策
1.サーバーが「.htc」ファイルを許可していない
サーバーが任意のファイル形式に対応していない場合もあります。
その場合、「.htaccess」に以下の行を追加すればOKです。
AddType text/x-component .htc
サイト内に「.htaccess」が無ければ新規作成します。
基本的なことですので、作成方法は他サイトを参照してください。
2.角丸ボックスを重ねることが出来ない
角丸ボックスの中に、更に角丸ボックスを入れる場合に上手くいかないことがあるようです。
対策として、外と中の両方のボックスに対するCSSに以下を追加すれば可能です。
※zoomプロパティがW3Cのチェックでひっかかります。
position:relative; zoom:1;
例）
.box { position:relative; ￣￣￣￣￣￣￣￣￣￣ zoom:1; ￣￣￣￣ -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; -moz-box-shadow: 10px 10px 20px #000; -webkit-box-shadow: 10px 10px 20px #000; box-shadow: 10px 10px 20px #000; behavior: url(ie-css3.htc); }
3.内側の角丸ボックスが消えてしまう
厳密に言うと、"background"や"border-radius"、"box-shadow"が消えてしまいます。
自分が確かめた範囲だと、IE8の時だけ消えてしまいました。
対策としては、上の2.の項目で追加した所に「z-index」指定を追加すれば対応できました。
※もちろん外側ボックスよりも内側ボックスのz-index数値は上にしてあげて下さい。
その他
その他にもいろいろ不具合があるみたいですが...
とりあえず今の段階としてはCSS3で表現する以外に、画像・HTML・CSSの組み合わせで表現することも可能です。(もちろん可変ボックス)
使用するしないはサイトや制作者個人の意向に委ねます。
