CSS3 PIE（pie.htc）使用時にIEで正しく印刷ができない

CSS3のプロパティをIE8でも反映させて使うことができる、
とても便利なbehaviorスクリプトCSS3 PIE（pie.htc）。

http://css3pie.com/

角丸やドロップシャドウの処理は、
画像よりCSS3でやる方がスマートなので使っていたのですが、
IEで印刷した時にレイアウトが大きく崩れるという現象にハマってしまいました。

印刷プレビューすると上の画像のように、
左上にpie.htcを指定した要素が寄っているような感じです。
（黒い部分が見せられないので非常にわかりにくですが…）

回避策として、

• @media print でbehaviorスクリプトを非対応にする
• media="print"でCSSを振り分ける

としてみましたが、
なぜかどちらもIEのブラウザ上でCSS3 PIE自体が効かなくなってしまうという現象になってしまいました。

結局このレイアウト崩れの原因は、
CSS3 PIEの旧バージョンのバグ？で、
最新バージョン（1.0 beta4）ではレイアウト崩れは解消されているということがわかりました。
しかし、CSS3のプロパティは印刷時に反映されなくなってしまいます…。

上記のことからCSS3 PIEを使ってスタイルシートを書く場合、

IE8以前（IE9未検証）では、
印刷時にCSS3のプロパティが反映されない

ということに十分注意して使用していく必要があると思います。（今のところ）
CSS3 PIEのバージョンアップに期待しつつ…

この現象の対応策に関してはこちらの記事にかなり助けていただきました。

PIEを使用する際の注意点【印刷】
http://www.nandani.sakura.ne.jp/web_all/css/1583/

ありがとうございました。

印刷以外の注意点は以下
CSS3PIE（PIE.htc）が効かないと思ったら

Tweet