IE6/7/8をCSS3対応にする 「CSS3 PIE」

CSS3 PIEの使い方
(1)CSS3 PIEからファイルをダウンロード。
(2)ファイルの中にあるPIE.htcだけを任意のホームページサーバーディレクトリに
入れる。（ドメイン直下とか）
(3)CSSに以下のように記述する。
#css3box{ padding:15px; background:#ff907f; -webkit-border-bottom-right-radius:5px; /*Webkit系のブラウザで右下に半径5pxの角丸*/ -webkit-border-bottom-left-radius:5px; /*Webkit系のブラウザで左下に半径5pxの角丸*/ -moz-border-radius-bottomright:5px; /*firefox12以降で右下に半径5pxの角丸*/ -moz-border-radius-bottomleft:5px; /*firefox12以降で左下に半径5pxの角丸*/ border-radius:0 0 5px 5px; /*普通のCSS3 左右下に半径5pxの角丸*/ -pie-border-radius:0 0 5px 5px; /*IE8以降で左右下に半径5pxの角丸*/ behavior: url(PIE.htc); /*PIEの読み込み、角丸を適用するファイルからの相対パスで記述*/ }

(4)完了、注意点は「PIE.htc」のパスは角丸を効かせるhtmlまでのパスを
書く事。また-pie-border-radius:0 0 0 0;はPIEのジェネレーターでは出てこない,
左上から時計回りに4つの角丸を指定出来る。

(5)バグに関して
radiusを効かせている要素がIEで消えるバグがあったが
この要素のCSSの最初にpositon:relative;を効かせたら直った。
以下にバグ解決の参考サイトを載せる。

「CSS3 PIE」参考サイト
・コリス
・「IEの角丸を一行で指定出来る」参考サイト
・Firefox 13 リリース、接頭辞　-moz-border-radius* と -moz-box-shadow のサポート終了
・CSS3 PIE」がうまく動かなかった時の対処法