- 2010/12/15 2:37 PM
- CSS
角丸を一々作るのが不便だったので、 border-radiusで作っていたんですが・・・
CSS3はIEでは非対応なので表示されない。
かろうじてIE9ではサポートしているみたいですが、IE6,7,8は全滅。
正直やってられない気持ちでいっぱいですが、きっと便利なものがあるはず。
ということで今回の「IE-CSS3」です。
インストール
CSS3 support for Internet Explorer 6, 7, and 8のページの左上にある「Download」を選択して保存して下さい。
使い方
ダウンロードしたファイルを自分の好きな場所にアップロードしてください。
htcフォルダでまとめてもcssフォルダに入れても構いません。
後はborder-radius等のCSS3を記述したCSSの最後に、
behaviorプロパティをつかって、読み込んであげるだけです。
「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);
}
-moz-border-radiousとかなんじゃらほいって方に簡単に説明ですが、
border-radiusをサポートしているのはoperaのみです。
冒頭に-webkit-と付いているのはsafariとchrome、
-moz-と付いているのはfirefoxの為の記述となります。
ブラウザ毎に変更したいというのであればそれぞれに数値を入れれば良いですが、
基本的に同じ数値を入れてあげれば問題ありません。
後、「IE-CSS3」でサポートしているプロパティは
border-radius（角丸表現）
box-shadow（ボックスシャドウ）
text-shadow（テキストシャドウ）
の3つだけです。
上手く動かない方へ
と、なんか凄く簡単そうに言いましたけど、
下手したら動かない！詐欺だ！って思われる方がいると思います。
読み込みは簡単なのですが、htcファイルの扱いが色々とアレなので。
上手く動かない方は以下のどちらかに該当しているかと思います。
1.サーバーが許可していない
サーバーによってはhtcファイルを認識しない場合があります。
この場合は少々面倒なのですが、
テキストエディタ（何でも可）に
AddType text/x-component .htc
とだけ入力して下さい。
そのままファイルの名前を「.htaccess」で保存します。
ファイルの先等に「.」や拡張子無しのファイルが保存できない場合は適当な名前で作成して下さい。
後はサーバーの好きな場所に「.htaccess」をアップロードしてください。
先ほど名前を変えている方はアップロード後に変更することも忘れずに。
エディタによっては勝手に拡張子が付くと思いますので「.htaccess.txt」とかになってないか気をつけて下さい。
また、既に.htaccessが存在する場合は先ほどの一文を追加してあげて下さい。
2.相対パス指定を認識していない
自分の場合はコレだったのですが、なぜか相対パスだと認識してくれません。
サーバーによるものだと思いますが、この場合は読み込む時に絶対パスで指定して下さい。
というか絶対パスで指定すれば問題ないので推奨です。
（見本が相対パスなので上述が相対パスになってますが・・・）
behavior: url(http://www.test.com/ie-css3.htc);
という感じです。
おまけのエラーリポートと対策
上手く動いてやったーと思っていたのも束の間。
なんだか凄くバグ満載です。
公式にも書いてはありますが、対策乗せときますね。
1.入れ子で角丸が重ならない
角丸をかけたボックスの中でさらに角丸をするような表現の場合、上手く動きません。
対策としては、親ボックスと子ボックスに
.box {
position:relative;
zoom:1;
}
といったような記述をすることで対応できます。
これ以外にも、コチラのサイトでは重なり順を指定することで対策をとっているようです。
http://www.nandani.sakura.ne.jp/web_all/html/266/
個人的にはこちらのほうが好きですね。
zoomプロパティ使うとW3Cのチェックに引っかかったりするのが気にくわないので！
2.backgroundを無視
background-color、これが無視されます。
ただ、上述の対策でこれは解決されます。
致命的なのは、background-colorとbackground-imageが重複使用できません。
どういうことかというと、
background:#FFF url(aaaaa.jpg);
といったような表現が使えません。
調べても対策がでてこなかったので、これに関していえばお手上げです。
厳密に言えば上の記述をするとno-repeatを指定しても、勝手にrepeatになります。
そしてbackground-colorが消滅します。
しょうがないので、自分は角丸の中にさらに背景用のボックスを設けて対応しました。
3.なぜか勝手にboderが付く
どうにかして欲しい致命的エラー2
普通はborder:none;にすれば線が消えるんですが、消えません。
勝手に線が付きます。線が消えることが許可されていない感じです。
対策としてはボックスと同じ色にしてしまえば見た目は問題ないのですが、
線が邪魔な場合は非常に困ります。
これについても対策は皆無だったりするので、無理矢理position:absolute;で被せたりして対応しました。
実際は恐らくこれ以外にも融通効かないものが沢山ありそうです！
ぶっちゃけるとIE9が主流になるまで、面倒でも画像で表現した方が無難そうではあります。
ついでのおまけ
IE-CSS3とは関係ないのですが、公式でもあったので。
border-radiusを使い慣れてる人には「あたりまえだろ何言ってんだ」って感じですが、
入れ子に同じサイズで背景色のあるボックスなんかを入れると線表現が消えます。
.box {
width:700px;
border-radius:5px;
}
.inbox {
width:700px;
background-color:#FFF;
}
みたいな時ですね。
角丸分の余白を設けてあげないと角丸が塗りつぶされるので気をつけて下さい。
対策としてはpaddingで余白取ってあげるといいんじゃないでしょうか。
但し、これもブラウザによっては解釈が違ったりするので気をつけてね！
CSS3 support in Internet Explorer 6, 7, and 8:
IEでもCSS3 その１（ie-css3） | ダリの雑記：WEBプログラム版:
Similar Posts:
- Twitterを自分のサイトにカスタマイズして表示する
- HTML5について－恋は唐突に－
- テキストを共有編集可能な便利サイト「Type with me」
- WEB制作に便利なグラデーションのカラバリ表示ツール「0 to 255」
