IEでもCSS3を対応させたい時の対処法”ie-css3.htc”

以前にIEでも角丸と影をCSS3で表現したい！しかも簡単に！という記事を書きましたが、もうちょっとだけ簡単にするスクリプトがdesign-developさんにありましたので紹介。
たった１行追加するだけでOKの超簡単スクリプト。
角丸やシャドーなんかの、比較的良く使いそうな要素に対応しているんで、案件でIE6対応必須の時でも安心して使えそうですね。

導入は至って簡単で、適応させたいCSSのプロパティを記述したあとにIE用にスクリプトを読み込むようにします。

.box {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari and Chrome */
  border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */

  -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
  box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */

  behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}

最後に

behavior: url(ie-css3.htc);

として、ie-css3.htcを読み込んでいます。

んで、問題のie-css3.htcはコチラで用意してますんで、DLしてローカルに保存ね。

ネタもと：design-develop　IE6〜IE8をCSS3に対応させるスクリプト「Kick-ass CSS3 Support in IE6, 7, and 8」
ネタもと：aext.net Kick-ass CSS3 Support in IE6, 7, and 8

Share/Bookmark