みんなの敵IE。
未だにIE8に対応してというお話が来ますね。
まだまだシェアがあるので仕方がないのですが。
どうやらIE6,7は滅んだようね。
さて、
角丸とかボックスシャドウとかIE8では基本的に表現できません。
そんな理不尽な状況を打破してくれる素晴らしい奴。「PIE.htc」を紹介したいと思います。
何はともあれまずはこちらからダウンロードしましょう。
http://css3pie.com/download/
そしたら中に「PIE.htc」というものが入っているので
今回はこんな感じで設置します。
ちなみにHTCファイルとは「HTML Components ファイル」の略で、
これはIE5から導入され、色々リッチな表現ができちゃうすごいっぽい奴だそうです。（IEのみで）
PIE.htcの中はJavaScriptで書いてあるようなので、
興味のある方は中身を解読してみても楽しいと思います。
PIE.htcを設置したならばあとはこんな感じでCSSにちょい足しするだけです。
/* /css/main.css */
.corner {
border: 1px solid #696;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
behavior: url(/PIE.htc);
}
.shadow {
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
behavior: url(/PIE.htc);
}
これで試してみて角丸などが実現出来ていれば問題ありませんが、
効果が出ない場合はhtcファイルが読み込まれるように.htaccessに次の1行を追加しておきましょう。
#.htaccess
AddType text/x-component .htc
これでOK。
PIE.htcのホームページにDemoがあるので
「そもそもこのブラウザで表現できるのか？」ってのを確かめられます。
http://css3pie.com/
活用してみてください。
ではでは♪