IE8でも角丸やシャドウをかけたい「PIE.htc」

みんなの敵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行を追加しておきましょう。 #.htaccessAddType text/x-component .htc これでOK。 PIE.htcのホームページにDemoがあるので「そもそもこのブラウザで表現できるのか?」ってのを確かめられます。http://css3pie.com/ 活用してみてください。ではでは♪

View More